[Javascript] 배열 중복 제거 Set() / filter() + indexOf() / forEach() + includes()

배열에 중복된 요소가 있는지 확인 후 제거하여 새 배열로 출력하는 여러 가지 방법에 대해 알아보자.

 

 

 

 

목차

1. Set()
2. filter() + indexOf()
3. forEach() + includes()

 

 

 

1. Set()

중복된 값이 있는 배열을 new Set() 메서드를 활용하여 중복 값을 제거한다. 중복은 제거됐지만 배열이 아니기 때문에, 배열 형태로 변형하는 과정이 필요하다. '...' 연산자를 사용하는 스프레드 문법을 통해 객체로 변형해준다.

 

const array = [1, 2, 3, 1];
const set = new Set(array);
 
console.log(set); // {1, 2, 3}
console.log(toString.call(set)); // [object Set]
 
const newArray = [...set]; // 스프레드 문법 사용하여 객체로 변형하기
console.log(newArray); // [1, 2, 3]
console.log(toString.call(newArray)); // [object Array]

 

 

 

 

 

2.  filter() + indexOf()

배열을 filter() 메서드로 요소(ele)와 인덱스(idx) 값을 순회한다. 순회하면서 indexOf() 메서드로 각 요소(ele)의 첫 번째 위치를 출력하는데, 이렇게 하면 중복된 위치는 제외된다. 즉, 출력되는 인덱스 값은 0번째, 1번째, 2번째이다. 그 인덱스 값과 filter 인자에 넣은 idx이 일치하면 그 값을 배열로 출력한다. 따라서 array의 0번째, 1번째, 2번째 값이 배열로 출력된다.

 

const array = [1, 5, 3, 1];
const newArray = array.filter((ele, idx) => {
    return array.indexOf(ele) === idx;
}); 
 
Array.isArray(newArray); // true (배열인지 확인)
console.log(newArray); // [1, 5, 3]

 

 

 

 

 

 

 

3. forEach() + includes()

가장 직관적인 방법이다. 원본 배열을 forEach로 돌리면서, newArray에 이미 그 값이 있는지 확인한 후 넣는다.

 

const array = [1, 5, 3, 1];
const newArray = [];
 
array.forEach((ele) => {
    if (!newArray.includes(ele)) { // newArray 안에 해당 값이 있는지 확인
        newArray.push(ele);
    }
});
 
console.log(toString.call(newArray)); // [object Array]
console.log(newArray); // [1, 5, 3]