어제 오늘 내일

[Javascript] 배열 중복 값 개수 구하기 본문

IT/Javascript

[Javascript] 배열 중복 값 개수 구하기

hi.anna 2020. 12. 16. 20:01

 

배열에 있는 값들이 몇번이나 중복 되는지 찾는 방법을 소개합니다.

 

  1. forEach() 이용하기
  2. reduce() 이용하기
  3. Map 객체 이용하기

 

 

1. forEach() 이용하기

const arr = ['a', 'b', 'a', 'b', 'c'];

const result = {};
arr.forEach((x) => { 
  result[x] = (result[x] || 0)+1; 
});

document.write(JSON.stringify(result));

 

 

const arr = ['a', 'b', 'a', 'b', 'c'];

중복되는 값을 가지는 배열이 있습니다.

 

const result = {};

중복된 값의 갯수를 저장하기 위한 Object를 선언하였습니다.

 

arr.forEach(callback함수);

배열(arr)의 각각의 원소들을 순서대로 callback함수에 전달하여 실행합니다.

 

result[x] = (result[x] || 0) + 1;

이 코드를 좀 더 풀어쓰면 아래와 같습니다.

if(result[x])	{
	result[x] = result[x] + 1;
}else {
    result[x] = 0 + 1;
}

처음에 배열의 첫번째 값 'a'가 들어오면,

result[x], 즉, result.a는 undefined 입니다.

result.a가 undefined이므로

result에 a 속성을 추가하고, 0+1, 즉, 1을 세팅합니다.

 

배열의 두번째 값 'b'가 들어와도 마찬가지로

result에 b 속성을 추가하고, 1을 세팅합니다.

 

배열의 세번째 값 'a'가 들어오면,

이번에는 result.a의 값이 1로 세팅되어 있으므로,

result.a의 값을 result.a + 1, 즉, 1+1, 2로 세팅합니다.

 

이런 방법으로 배열의 모든 원소를 대상으로 반복합니다.

이 때, 객체의 속성명을 동적으로 추가하기 위해서 

점 표기법(dot notation)대신에 대괄호 표기법(square bracket notation)을 사용한 것에 주의 하세요.

[Javascript] 객체 속성 읽기, 추가, 변경, 삭제

 

JSON.stringify(result);

객체의 속성과 값들을 출력해 주기 위해서 객체를 JSON 문자열로 변경하였습니다.

[Javascript] 객체를 JSON으로 변환하기

 

 

2. reduce() 이용하기

const arr = ['a', 'b', 'a', 'b', 'c'];

const result = arr.reduce((accu, curr) => { 
  accu[curr] = (accu[curr] || 0)+1; 
  return accu;
}, {});

document.write(JSON.stringify(result));

 

이전의 forEach 예제를 그대로 reduce() 함수를 이용하도록 변경하였습니다.

reduce() 함수는, 배열의 값을 순회하면서 배열의 값을 특정 형태로 누적하는데 사용합니다.

reduce() 함수의 자세한 사용법은 지난 포스팅을 참조하세요.

[Javascript] 배열의 합계, 평균 계산하기 - reduce(), reduceRight()

 

 

3. Map 객체 이용하기

const arr = ['a', 'b', 'a', 'b', 'c'];

const result = arr.reduce((accu,curr)=> {
  accu.set(curr, (accu.get(curr)||0) +1) ;
  return accu;
},new Map());

for (let [key, value] of result.entries()) {
  document.write(key + ' : ' + value + '<br>');
}

이번에는 reduce()를 사용한 예제를 좀 더 응용하여

중복값을 저장을 일반 객체가 아닌 Map 자료구조에 하도록 하였습니다.

Map은 2번 예제에서 사용한 객체와 같이 key와 value를 저장하는 자료 구조입니다.

일반 객체와 다른 점은 Map은 객체를 key로 지정할 수도 있다는 것입니다.

Map 객체를 사용하면,

배열의 원소가 일반 문자열이나 숫자가 아닌 객체인 경우에도 

해당 객체를 key로 사용할 수 있겠죠?

 


 

배열 중복 원소의 갯수를 구하는 방법을 알아보았습니다.

 

 

반응형
Comments