JavaScript에서 배열 요소를 데이터 타입별로 그룹화하는 방법

문제 상황

혼합된 데이터 유형(숫자, 문자열, 불리언 등)이 섞여 있는 배열이 주어졌을 때, 각 요소를 데이터 타입별로 분류하여 객체 형태로 반환하는 JavaScript 함수를 작성해야 합니다. 이때 반환되는 객체는 데이터 타입 이름을 키(key)로, 해당 타입의 요소들을 담은 배열을 값(value)으로 가져야 합니다.

해결 코드

다음은 typeof 연산자와 hasOwnProperty() 메서드를 활용한 해결 방법입니다.

const arr = [1, 'a', [], '4', 5, 34, true, undefined, null];

const groupDataTypes = (arr = []) => {
   const res = {};
   for(let i = 0; i < arr.length; i++){
      const el = arr[i];
      const type = typeof el;
      if(res.hasOwnProperty(type)){
         res[type].push(el);
      }else{
         res[type] = [el];
      };
   };
   return res;
};

console.log(groupDataTypes(arr));

실행 결과

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

{
   number: [ 1, 5, 34 ],
   string: [ 'a', '4' ],
   object: [ [], null ],
   boolean: [ true ],
   undefined: [ undefined ]
}

코드 동작 원리

함수의 동작 과정을 단계별로 살펴보겠습니다.

• 결과 객체 초기화: 그룹화된 데이터를 저장할 빈 객체 res를 생성합니다.
• 배열 순회: for 반복문을 사용해 배열의 모든 요소를 하나씩 확인합니다.
• 타입 판별: typeof 연산자로 각 요소의 데이터 타입을 문자열로 얻어냅니다.
• 그룹화 처리: hasOwnProperty()로 해당 타입의 키가 이미 존재하는지 검사한 후, 존재하면 기존 배열에 요소를 추가(push)하고, 존재하지 않으면 새 배열을 생성해 할당합니다.

주의할 점: null의 타입 분류

출력 결과에서 주목할 부분은 null이 object 그룹에 포함되었다는 점입니다. 이는 JavaScript의 오랜 역사적 특성으로, typeof null은 항상 "object"를 반환합니다. 따라서 null을 별도의 그룹으로 구분하고 싶다면 아래와 같이 조건문을 수정해야 합니다.

const type = el === null ? 'null' : typeof el;

또한 빈 배열([]) 역시 참조 타입이므로 object로 분류됩니다. 배열과 일반 객체를 구분하고 싶다면 Array.isArray() 메서드를 함께 활용하면 됩니다.