문제 소개
서로 다른 데이터 타입의 요소들이 섞여 있는 배열이 주어졌을 때, 각 데이터 타입이 몇 번 등장하는지를 Map 객체 형태로 반환하는 자바스크립트 함수를 작성해 보겠습니다.
예를 들어 다음과 같은 배열이 있다고 가정해 봅시다.
const arr = [23, 'df', undefined, null, 12, {
name: 'Rajesh'
}, [2, 4, 7], 'dfd', null, Symbol('*'), 8];이 배열에는 숫자, 문자열, undefined, null, 객체, 배열, 심볼 등 다양한 타입의 값이 포함되어 있습니다.
해결 방법: reduce()와 Map() 활용
배열의 reduce() 메서드와 Map 객체를 조합하면 이 문제를 간결하게 해결할 수 있습니다. 아래는 전체 예제 코드입니다.
const arr = [23, 'df', undefined, null, 12, {
name: 'Rajesh'},
[2, 4, 7], 'dfd', null, Symbol('*'), 8];
const countDataTypes = arr => {
return arr.reduce((acc, val) => {
const dataType = typeof val;
if(acc.has(dataType)){
acc.set(dataType, acc.get(dataType) + 1);
}else{
acc.set(dataType, 1);
};
return acc;
}, new Map());
};
console.log(countDataTypes(arr));코드 동작 원리
- typeof 연산자: 배열을 순회하면서 각 요소의 데이터 타입을 문자열로 확인합니다.
- Map 객체: 초기값으로 빈
new Map()을 전달하고, 타입이 이미 존재하면 기존 값에 1을 더하고, 없으면 1로 새로 설정합니다. - reduce 누적 처리: 모든 요소를 순회한 후 최종적으로 타입별 빈도수가 담긴 Map이 반환됩니다.
참고로 자바스크립트에서 typeof null은 'object'를 반환하며, 배열 역시 객체로 분류되기 때문에 위 예제에서는 일반 객체, 배열, null이 모두 'object' 카테고리에 포함됩니다.
출력 결과
콘솔에 출력되는 결과는 다음과 같습니다.
Map(5) {
'number' => 3,
'string' => 2,
'undefined' => 1,
'object' => 4,
'symbol' => 1
}숫자 3개(23, 12, 8), 문자열 2개('df', 'dfd'), undefined 1개, 객체·배열·null을 합친 object 4개, 그리고 Symbol 1개로 정확하게 집계된 것을 확인할 수 있습니다.