JavaScript 배열 중복 제거하는 방법 5가지

JavaScript 배열 중복 제거하는 방법 5가지

 

JavaScript 의 배열에서 중복을 제거하는 5가지 방법을 알려드리도록 하겠습니다.

목차

• set() 사용하여 배열에서 중복 제거하는 방법
• filter(), indexOf() 사용하여 배열에서 중복 제거하는 방법
• reduce(), includes() 사용하여 배열에서 중복 제거하는 방법
• for() OR forEach(), includes() 사용하여 배열에서 중복 제거하는 방법
• Object.fromEntries(), map(), Object.keys() 사용하여 배열에서 중복 제거하는 방법

const array = ['C', 'A', 'B', 'A', 'C', 'D', 'C', 'C', 'E', 'D'];
console.log(array);	// ['C', 'A', 'B', 'A', 'C', 'D', 'C', 'C', 'E', 'D']

let result1 = [...new Set(array)];
console.log(result1);	// ['C', 'A', 'B', 'D', 'E']

let result2 = array.filter((v, i) => array.indexOf(v) === i);
console.log(result2);	// ['C', 'A', 'B', 'D', 'E']

let result3 = array.reduce((ac, v) => ac.includes(v) ? ac : [...ac, v], []);
console.log(result3);	// ['C', 'A', 'B', 'D', 'E']

let result4 = [];
for(v of array) {
  if (!result4.includes(v)) result4.push(v);
}
console.log(result4);	// ['C', 'A', 'B', 'D', 'E']

let result5 = Object.keys(Object.fromEntries(array.map(v => [v, 0])));
console.log(result5);	// ['C', 'A', 'B', 'D', 'E']

 

set() 사용하여 배열에서 중복 제거하는 방법

const array = ['C', 'A', 'B', 'A', 'C', 'D', 'C', 'C', 'E', 'D'];
console.log(array);	// ['C', 'A', 'B', 'A', 'C', 'D', 'C', 'C', 'E', 'D']

let result1 = [...new Set(array)];
console.log(result1);	// ['C', 'A', 'B', 'D', 'E']

let result2 = Array.from(new Set(array));
console.log(result2);	// ['C', 'A', 'B', 'D', 'E']

JavaScript 에서 ES6 에 생긴 Set 을 사용하면 배열의 중복을 제거할 수 있습니다.

 

Set은 유니크한 값만을 담을 수 있기 때문에 배열을 Set 형태로 만들어 중복을 제거하고,

다시 배열 안에서 전개연산자(...)를 사용하여 중복이 제거된 배열로 만들거나,

Array.from()을 사용하여 중복이 제거된 Set으로부터 배열로 만들면 됩니다.

 

filter(), indexOf() 사용하여 배열에서 중복 제거하는 방법

const array = ['C', 'A', 'B', 'A', 'C', 'D', 'C', 'C', 'E', 'D'];
console.log(array);	// ['C', 'A', 'B', 'A', 'C', 'D', 'C', 'C', 'E', 'D']

let result = array.filter((v, i) => array.indexOf(v) === i);
console.log(result);	// ['C', 'A', 'B', 'D', 'E']

filter() 와 indexOf() 함수를 사용하여 배열의 중복을 제거할 수 있습니다.

 

filter() 함수는 filter() 함수 안의 callback 함수에 정의한 부분에 대해 true 로 반환되는 요소만을 배열로 반환합니다.

그리고, indexOf()는 입력 값이 해당 배열에서 가장 처음 나타나는 index를 알려줍니다.

 

그러므로,

filter() 함수 안의 callback 함수의 1번째 인자값인 현재 검사중인 요소가 기존의 배열에서 가장 처음 나타나는 index가

현재 검사하고 있는 요소의 index와 일치하면 처음으로 발견된 요소이므로 true 를 반환하여 걸러지지 않고,

일치하지 않으면 false 를 반환하여 걸러지게 되어 배열의 중복이 제거됩니다.

 

reduce(), includes() 사용하여 배열에서 중복 제거하는 방법

const array = ['C', 'A', 'B', 'A', 'C', 'D', 'C', 'C', 'E', 'D'];
console.log(array);	// ['C', 'A', 'B', 'A', 'C', 'D', 'C', 'C', 'E', 'D']

let result = array.reduce((ac, v) => ac.includes(v) ? ac : [...ac, v], []);
console.log(result);	// ['C', 'A', 'B', 'D', 'E']

reduce() 와 includes() 함수를 사용하여 배열의 중복을 제거할 수 있습니다.

 

여기서의 방식은 새로운 배열을 만들고 for(forEach) 문을 돌려 중복을 제거하는 방식과 비슷하게 생각하시면 됩니다.

 

reduce()의 두번째 인자 값으로 결과값을 담을 새로운 빈 배열 하나를 만들고,

reduce()의 첫번째 인자로 callback 안에서 callback 함수의 두번째 인자(v)를 새로 만든 배열(ac)에 includes()를 사용하여

새로 만든 배열에 존재하지 않으면 해당 값을 삽입한 배열을 반환하고,

존재하면 해당 값을 삽입하지 않고 반환하는 방식으로 배열을 만들어 만들어진 최종 값을 반환합니다.

 

reduce() 는 제가 개인적으로 정말 좋아하고 자주쓰는 함수입니다. 잘만 쓰면 아주 다양한 용도로 너무 편하게 사용할 수 있습니다.

 

for() OR forEach(), includes() 사용하여 배열에서 중복 제거하는 방법

const array = ['C', 'A', 'B', 'A', 'C', 'D', 'C', 'C', 'E', 'D'];
console.log(array);	// ['C', 'A', 'B', 'A', 'C', 'D', 'C', 'C', 'E', 'D']

let result1 = [];
for (v of array) {
  if (!result1.includes(v)) result1.push(v);
}
console.log(result1);	// ['C', 'A', 'B', 'D', 'E']

let result2 = [];
array.forEach((v) => {
  if (!result2.includes(v)) result2.push(v);
});
console.log(result2);	// ['C', 'A', 'B', 'D', 'E']

let result3 = [];
for (let i = 0; i < array.length; i++) {
  if (!result3.includes(array[i])) result3.push(array[i]);
}
console.log(result3);	// ['C', 'A', 'B', 'D', 'E']

for() 혹은 forEach() 와 includes() 함수를 사용하여 배열의 중복을 제거할 수 있습니다.

 

아무래도 가장 간단하게 설명할 수 있겠는데요.

 

중복이 제거된 값을 담을 새로운 배열을 하나 만든 뒤,

for() 혹은 forEach() 를 사용해서 기존의 배열의 요소를 하나씩 돌면서,

includes()를 사용해 새로 만든 배열에 현재 요소가 존재하는지 확인하고,

새로운 배열에 현재 요소가 존재하지 않는다면 현재 요소를 새로운 배열에 담고,

이미 현재 요소가 존재한다면 담지 않는 방법으로 중복이 제거된 새로운 배열을 만듭니다.

 

Object.fromEntries(), map(), Object.keys() 사용하여 배열에서 중복 제거하는 방법

const array = ['C', 'A', 'B', 'A', 'C', 'D', 'C', 'C', 'E', 'D'];
console.log(array);	// ['C', 'A', 'B', 'A', 'C', 'D', 'C', 'C', 'E', 'D']

let result = Object.keys(Object.fromEntries(array.map(v => [v, null])));
console.log(result);	// ['C', 'A', 'B', 'D', 'E']

Object.fromEntries(), map(), Object.keys() 함수를 사용하여 배열의 중복을 제거할 수 있습니다.

 

기존 배열에 map() 을 사용하여 [['C', null], ['A', null], ['B', null], ['A', null] ...... ] 의 형태로 변환한 뒤,

Object.fromEntries() 함수를 사용하여 {'C' : null, 'A' : null, 'B' : null, 'A' : null ...... } 와 같은 key값이 중복될 수 없는 Object 형태의 형식으로 변환하면서,

변환된 Object 에서 Object.keys() 를 사용하여 key들만을 다시 배열로 뽑아내는 방식입니다.

 

 

이상으로 JavaScript에서 배열 요소 중복을 제거하는 5가지 방법에 대한 설명을 마치도록 하겠습니다.

 

 

도움이 되셨다면 공감, 댓글 부탁드립니다!

궁금하신 점이나 요청사항은 언제든지 말씀해주세요!

피드백도 언제나 환영입니다!

 

감사합니다.