JavaScript 배열로 요소별 빈도(Frequency) 객체 만들기

이번 글에서는 리터럴 값으로 구성된 배열을 입력받아, 그 배열을 기반으로 하나의 객체를 생성해 반환하는 JavaScript 함수를 작성해 보겠습니다.

만들어질 객체의 키(key)는 배열에 포함된 중복 없는 고유 요소들이며, 각 키의 값(value)은 해당 요소가 배열 안에 몇 번 등장했는지를 나타내는 빈도수입니다.

구현 방법

핵심 로직은 다음과 같습니다.

• 빈 객체를 하나 생성합니다.
• 반복문으로 배열을 순회하면서 현재 요소가 객체에 이미 존재하는지 확인합니다.
• 존재한다면 해당 키의 값을 1 증가시키고, 존재하지 않는다면 값을 1로 초기화합니다.
• 순회가 끝나면 완성된 객체를 반환합니다.

예제 코드

const arr = [4, 6, 3, 1, 5, 8, 9, 3, 4];
const findFrequency = (arr = []) => {
    const map = {};
    for(let i = 0; i < arr.length; i++){
        const el = arr[i];
        if(map.hasOwnProperty(el)){
            map[el]++;
        } else {
            map[el] = 1;
        };
    };
    return map;
};
console.log(findFrequency(arr));

실행 결과

위 코드를 콘솔에서 실행하면 아래와 같은 결과가 출력됩니다.

{ '1': 1, '3': 2, '4': 2, '5': 1, '6': 1, '8': 1, '9': 1 }

결과를 보면 3과 4는 배열에 두 번씩 등장했기 때문에 값이 2로 기록되었고, 나머지 요소들은 한 번씩만 나타났으므로 값이 1인 것을 확인할 수 있습니다.

참고: reduce()를 활용한 대안

같은 작업은 Array.prototype.reduce() 메서드를 사용하면 더 간결하게 처리할 수 있습니다.

const findFrequency = (arr = []) =>
  arr.reduce((acc, el) => {
    acc[el] = (acc[el] || 0) + 1;
    return acc;
  }, {});

console.log(findFrequency([4, 6, 3, 1, 5, 8, 9, 3, 4]));
// { '1': 1, '3': 2, '4': 2, '5': 1, '6': 1, '8': 1, '9': 1 }

두 방법 모두 시간 복잡도는 O(n)으로 동일하므로, 상황에 맞게 가독성이 좋은 방식을 선택하면 됩니다.