JavaScript에서 배열 내 동일한 속성 값을 가진 객체 개수 세는 방법

JavaScript를 다루다 보면 객체 배열 안에 특정 속성 값이 몇 번 등장하는지 집계해야 하는 경우가 자주 있습니다. 예를 들어 항공권 검색 결과에서 '경유'와 '직항' 노선이 각각 몇 개인지 파악하는 상황을 생각해 볼 수 있습니다.

이번 글에서는 reduce나 forEach를 활용해 객체 배열의 특정 값별 개수를 세고, 그 결과를 원하는 형태로 출력하는 방법을 알아보겠습니다.

문제 상황

다음과 같이 항공 노선 정보를 담은 객체 배열이 있다고 가정해 보겠습니다.

const routes = [
  {
    flyFrom: "CDG",
    flyTo: "DUB",
    return: 0,
  },
  {
    flyFrom: "DUB",
    flyTo: "SXF",
    return: 0,
  },
  {
    flyFrom: "SFX",
    flyTo: "CDG",
    return: 1,
  }
];

여기서 우리가 확인하고 싶은 것은 return: 0(경유)이 몇 번, return: 1(직항)이 몇 번 나타나는지입니다.

최종적으로 얻고자 하는 출력 결과는 다음과 같습니다.

return: 0이 2번 등장한 경우 --- 1 Stop
return: 1이 1번 등장한 경우 --- Non-stop

해결 방법

핵심 아이디어는 간단합니다. 빈 객체에 각 요소의 return 값을 키로 사용해 등장 횟수를 누적하고, 이후 그 개수만큼 반복하며 원하는 문자열을 출력하면 됩니다.

const routes = [
  {
    flyFrom: "CDG",
    flyTo: "DUB",
    return: 0,
  },
  {
    flyFrom: "DUB",
    flyTo: "SXF",
    return: 0,
  },
  {
    flyFrom: "SFX",
    flyTo: "CDG",
    return: 1,
  }
];

const displaySimilar = arr => {
  const count = {};
  arr.forEach(el => {
    count[el.return] = (count[el.return] || 0) + 1;
  });
  Object.keys(count).forEach(key => {
    for(let i = 0; i < count[key]; i++){
      if(key === '0'){
        console.log('1 Stop');
      }
      else if(key === '1'){
        console.log('Non-stop');
      }
    }
  })
};

displaySimilar(routes);

코드 동작 원리

코드를 단계별로 살펴보면 다음과 같습니다.

1. 개수 집계: forEach로 배열을 순회하면서 count 객체에 return 값을 키로 저장합니다. (count[el.return] || 0) + 1 표현식은 해당 키가 처음 등장하면 0으로 초기화한 뒤 1을 더하는 방식으로 동작합니다.

2. 결과 출력: Object.keys()로 집계된 키 목록을 순회하고, 각 키의 개수(count[key])만큼 반복문을 돌며 '1 Stop' 또는 'Non-stop' 문자열을 출력합니다.

참고로 객체의 키는 항상 문자열로 변환되기 때문에 비교 시 '0', '1'처럼 문자열 리터럴과 비교해야 한다는 점에 유의하세요.

출력 결과

위 코드를 실행하면 콘솔에 다음과 같이 출력됩니다.

1 Stop
1 Stop
Non-stop

return: 0인 항공편이 2개이므로 '1 Stop'이 두 번, return: 1인 항공편이 1개이므로 'Non-stop'이 한 번 출력된 것입니다.

마무리

이처럼 객체를 카운터로 활용하면 별도의 라이브러리 없이도 배열 내 값의 등장 횟수를 손쉽게 집계할 수 있습니다. 조금 더 함수형 스타일을 선호한다면 Array.prototype.reduce()를 사용해 같은 로직을 구현할 수도 있으니, 프로젝트의 코드 스타일에 맞게 선택해서 활용해 보시기 바랍니다.