[JavaScript] 배열의 중복을 제거하는 법 5가지

다섯가지 방법 한눈에 보기!

 

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

//Set()을 이용한 방법
let result1 = [...new Set(array)];
console.log(result1);	// ['C', 'A', 'B', 'D', 'E']

//fillter()와 indexOf를 이용한 방법
let result2 = array.filter((v, i) => array.indexOf(v) === i);
console.log(result2);	// ['C', 'A', 'B', 'D', 'E']

//includes()와 reduce()를 이용한 방법
let result3 = array.reduce((ac, v) => ac.includes(v) ? ac : [...ac, v], []);
console.log(result3);	// ['C', 'A', 'B', 'D', 'E']

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

//Object.keys(), Object.fromEntries()와 map()을 이용한 방법
let result5 = Object.keys(Object.fromEntries(array.map(v => [v, 0])));
console.log(result5);	// ['C', 'A', 'B', 'D', 'E']

---

1. Set()을 사용하기

배열에서 중복을 가장 쉽게 제거하는 방법은 Set() 자료구조를 사용하는 방법이다.

 

Set()는 고유한 값들의 집합을 다루는 자료구조이다. (ES6+)

그러니까 순서가 없는, 중복되지 않은 데이터의 집합이다.

배열과 달리 Set()는 순서가 없으므로 index를 통해 데이터에 접근할 수 없다.

배열과 달리 Set()는 중복되지 않은 데이터의 집합이므로

새로운 값을 추가할 때 중복된 값이 추가되지 않으며, 유일한 값만 add()로 추가할 수 있다.

 

그럼 이제 이를 이용하여 중복을 제거해보자.

배열을 Set 형태로 만들어 중복을 제거하고, 이를 다시 배열로 만들면 완성이다.

 

// 배열을 세트로 변환
const array = [1, 2, 2, 3, 3, 3];
const set = new Set(array); // Set(3) {1, 2, 3}

// 세트를 배열로 변환 
// 전개연산자 사용
const array = [...set]; // [1, 2, 3]
// Array.from() 사용
const array = Array.from(set); // [1, 2, 3]

 

한줄로 압축하면

 

const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

---

2. filter()와 indexOf() 사용하기

filter() 함수는 filter() 함수 안의 callback 함수에서 true 로 반환되는 요소만을 배열로 반환하고,
indexOf()는 입력 값이 해당 배열에서 가장 처음 나타나는 index를 알려준다.

그러므로, 두 함수를 같이 사용하면 현재 인덱스에 처음 나타나는 요소만을 남긴다.

 

const array = [1, 2, 3, 4, 1, 2, 5, 6, 3];
const uniqueArray = array.filter((value, index) => array.indexOf(value) === index);
console.log(uniqueArray);

 

여기서 한번 응용을 해보자.

중복된 값을 얻고 싶으면 어떻게 하면 되겠나?

filter함수 안의 조건문을 뒤집으면 되겠다.

 

const array = [1, 2, 3, 4, 1, 2, 5, 6, 3];
const uniqueArray = array.filter((value, index) => array.indexOf(value) !== index);
console.log(uniqueArray);

---

3. includes()와 reduce() 사용하기

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

reduce()의 첫번째 인자로

새로 만든 배열에 존재하는 경우, 해당 값을 삽입하지 않고 반환하고,

존재하지 않는 경우, 해당 값을 삽입한 배열을 반환하는 방식으로 배열을 만든다.

 

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

---

4. includes()와 반복문 사용하기

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

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

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

이미 현재 요소가 존재한다면 담지 않는다.

 

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

---

5. Object.keys(), Object.fromEntries()와 map() 사용하기

Object.keys() 메서드는 일반적인 반복문과 동일한 순서로 순회되는

열거할 수 있는 주어진 객체의 속성(property) 이름 배열을 반환한다.

 

// Object.keys() 사용 예시
const object1 = {
  a: 'somestring',
  b: 42,
  c: false,
};

console.log(Object.keys(object1)); // Array ["a", "b", "c"]

 

Object.fromEntries() 메서드는  key-value 쌍의 list를 객체로 바꾼다.

 

// Object.fromEntries() 사용 예시
const entries = new Map([
  ['foo', 'bar'],
  ['baz', 42],
]);

const obj = Object.fromEntries(entries);

console.log(obj); // { foo: "bar", baz: 42 }

 

이러한 메서드들로 배열의 중복값을 제거할 수 있다.

 

기존 배열에 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들만을 다시 배열로 뽑아내면된다.

 

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

---

참고를 위한 링크이다.

JavaScript: Remove Duplicates from an Array