자바스크립트 배열 중복 요소 제거 방법들

방법 1 — Set 이용 ⭐️

---

Set을 이용해 중복 요소를 제거하는 방식의 성능이 가장 좋다

 

Set은 유니크한 값만 저장할 수 있기 때문에 new Set() 인자에 들어온 배열의 중복 요소는 자동으로 제거된다. Array.from은 ➊유사 배열 객체나 ➋반복 가능한 객체를 얕게 복사해 새로운 배열을 반환한다. 전개문법을 사용해도 결과는 동일.

const arr = ["A", "B", "A", "D", "B", "F"];
const deDuplicated = [...new Set(arr)];
// const deDuplicated = Array.from(new Set(arr))
console.log(deDuplicated); // [ 'A', 'B', 'D', 'F' ]

 

Set, Map 관련 더 자세한 내용은 Map / Set 자료구조 노트 참고.

 

• new Set([iterable]) : 새로운 Set 생성
• set.add(value) : value 추가 후 Set 반환. 만약 인자에 입력한 value가 기존 Set 안에 있으면 아무런 작업 안함
• set.delete(value) : 값 제거후, 제거 성공 여부 true / false 반환
• set.has(value) : 인자에 입력한 value가 Set에 존재하는지 확인. Boolean 값 반환
• set.clear() : Set 초기화
• set.size : Set에 몇개의 value가 있는지 확인

 

방법 2 — filter / indexOf 이용

---

중복값만 따로 배열에 담고 싶을 때 유용

 

arr.indexOf() 메서드는 인자에 입력한 요소가 배열에 존재하면 해당 요소의 인덱스를 반환한다. 인자에 입력한 요소가 배열에 여러개 있어도 첫번째로 찾은 요소의 인덱스를 반환한다. 없으며 -1 반환.

 

filter 메소드로 arr 배열의 2번째 인덱스에 있는 A 요소를 순회할 때의 인덱스는 2지만 indexOf로 찾은 인덱스는 0이므로 false 반환. 이 작업을 반복하면서 중복 요소를 제거한다.

const arr = ["A", "B", "A", "D", "B", "F"];
const deDuplicated = arr.filter((el, idx) => arr.indexOf(el) === idx);
// 중복값만 배열에 담고 싶다면 arr.indexOf(el) !== idx
console.log(deDuplicated); // [ 'A', 'B', 'D', 'F' ]

 

방법 3 — forEach / includes 사용

---

includes는 인자에 입력한 요소가 배열에 있는지 확인한 후 Boolean 값을 반환한다. 이를 활용해 for문이나 forEach 등을 사용하여 중복 요소를 제거할 수 있다.

const arr = ["A", "B", "A", "D", "B", "F"];
const deDuplicated = [];
arr.forEach((el) => {
  if (deDuplicated.includes(el) === false) {
    deDuplicated.push(el);
  }
});
console.log(deDuplicated); // [ 'A', 'B', 'D', 'F' ]

 

방법 4 — reduce / includes 사용

---

`includes`, `indexOf`는 배열뿐만 아니라 이터러블인 문자열도 검사할 수 있다.

 

reduce에서 초기값을 지정하지 않으면 첫번째 요소가 누적값(acc)가 된다. 따라서 첫번째 요소를 순회할 때 'A'가 unique(누적값) 값이 된다. 2번째 순회에선 if 문을 통과하지 못하고 ['A', 'B']가 unique 값이 된다. 3번째 순회에선 unique에 순회하는 요소가 있으므로 if문 조건 통과하여 누적값 그대로 리턴. 다음 요소 순회하며 반복...

const arr = ["A", "B", "A", "D", "B", "F"];
const deDuplicated = arr.reduce((unique, item) => {
  if (unique.includes(item)) {
    return unique;
  }
  return [...unique, item];
});
console.log(deDuplicated); // [ 'A', 'B', 'D', 'F' ]

 

console.time 테스트

---

`console.time('타이머이름')`, `console.timeEnd('타이머이름')`로 코드 수행시간을 확인할 수 있다. 파라미터엔 타이머의 이름을 입력하며, time과 timeEnd 이름이 같아야 한다.

 

Set 사용 시 : 0.0073ms

Filter 사용 시 : 0.03ms

forEach 사용 시 : 0.05ms

Reduce 사용 시 : 0.04ms

 

레퍼런스

---

How to Remove Array Duplicates in ES6  

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요