[Javascript] 배열 중복 제거하는 방법

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

---

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']

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() 함수는 filter() 함수 안의 callback 함수에 정의한 부분에 대해 true로 반환되는 요소만을 배열로 반환한다.

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

 

따라서 filter() 함수 안의 callback 함수의 1번째 인자값인 현재 검사중인 요소가 기존 배열에서 가장 처음 나타는 index가 현재 검사하고있는 요소의 index와 일치하면 처음으로 발견된 요소이기에 true를 반환하여 걸러내지 않고 그렇지 않으면 걸러내어 중복이 제거된다.

---

reduce(), inclues() 사용하여 배열에서 중복 제거

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()를 사용하여 새로 만든 배열에 존재하지 않으면 해당 값을 삽입한 배열을 반환하고,

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

---

for() 혹은 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() 를 사용해 새로 만든 배열에 현재 요소가 존재하는지 확인하고,

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

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

---

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']

기존 배열에 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들을 다시 배열로 뽑아내는 방식.

 

출처 : https://jsikim1.tistory.com/227

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