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

문제 상황

다음과 같이 사용자 정보를 담고 있는 객체 배열이 있다고 가정해 보겠습니다.

const arr = [
    {
        "name": "aaa",
        "id": "2100",
        "designation": "developer"
    },
    {
        "name": "bbb",
        "id": "8888",
        "designation": "team lead"
    },
    {
        "name": "ccc",
        "id": "6745",
        "designation": "manager"
    },
    {
        "name": "aaa",
        "id": "9899",
        "designation": "sw"
    }
];

여기서 요구되는 것은 이러한 배열을 입력으로 받아, name 속성 값을 키(key)로 하고 그 이름을 가진 객체가 몇 개인지를 값(value)으로 담은 새로운 객체를 반환하는 JavaScript 함수를 작성하는 것입니다.

따라서 위 배열에 대한 출력 결과는 다음과 같습니다.

const output = {
    "aaa": 2,
    "bbb": 1,
    "ccc": 1
};

해결 방법: 예제 코드

이 문제는 반복문과 객체의 속성 존재 여부 확인만으로 간단하게 해결할 수 있습니다. 전체 코드는 다음과 같습니다.

const arr = [
    {
        "name": "aaa",
        "id": "2100",
        "designation": "developer"
    },
    {
        "name": "bbb",
        "id": "8888",
        "designation": "team lead"
    },
    {
        "name": "ccc",
        "id": "6745",
        "designation": "manager"
    },
    {
        "name": "aaa",
        "id": "9899",
        "designation": "sw"
    }
];

const countNames = (arr = []) => {
    const res = {};
    for (let i = 0; i < arr.length; i++) {
        const { name } = arr[i];
        if (res.hasOwnProperty(name)) {
            res[name]++;
        } else {
            res[name] = 1;
        }
    }
    return res;
};

console.log(countNames(arr));

코드 동작 원리

위 코드의 핵심 로직을 단계별로 살펴보면 다음과 같습니다.

• 결과 저장용 빈 객체 생성: res 객체에 각 이름별 개수를 누적하여 저장합니다.
• 배열 순회: for 반복문을 사용해 배열의 모든 객체를 하나씩 확인합니다.
• 구조 분해 할당(Destructuring): const { name } = arr[i] 구문으로 현재 객체에서 name 값만 깔끔하게 추출합니다.
• 키 존재 여부 판별: hasOwnProperty() 메서드로 res 객체에 해당 이름이 이미 등록되어 있는지 검사합니다.
• 개수 누적 또는 초기화: 이미 존재하는 이름이면 기존 값에 1을 더하고, 처음 등장한 이름이면 1로 초기화합니다.

출력 결과

코드를 실행하면 콘솔에 다음과 같은 결과가 출력됩니다.

{ aaa: 2, bbb: 1, ccc: 1 }

'aaa'라는 이름을 가진 객체가 2개이고, 'bbb'와 'ccc'는 각각 1개씩 존재한다는 것이 정확하게 집계된 것을 확인할 수 있습니다. 이처럼 객체와 반복문을 활용하면 배열 데이터를 키 값 기준으로 손쉽게 그룹화하고 개수를 세울 수 있습니다.