[JavaScript] array 중복을 제거하는 방법

자바스크립트 배열에서 중복되는 값을 제거하는 방법에는 3가지가 있습니다.

 

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

 

1. Set 

자바스크립트에서 Set 객체를 이용하면 중복없는 데이터를 표현할 수 있습니다.

Set 객체의 이런 특징을 이용해서, 배열의 중복을 제거할 수 있습니다. 

 

const arr = [1, 2, 3, 1, 2];
const mySet = new Set(arr);   // 중복값이 있는 배열을 Set 객체로 만들어 중복을 제거
const uniqueArr = [...mySet];   // Set 객체를 다시 배열로 변환

console.log(Array.isArray(uniqueArr));   // true
console.log(uniqueArr);   // 1, 2, 3

 

const uniqueArr = [ ...mySet ];

Spread Operator(전개연산자)를 사용하여 Set 객체를 다시 배열로 변환하였습니다. 

Set 객체를 배열로 변환할 때, Spread Operator 대신

Array.from() 또는 forEach()문을 사용할 수도 있습니다. 

 

 

2. indexOf(), filter()

indexOf() 함수는, 배열에서 특정값이 처음으로 나타나는 index를 리턴합니다.

filter() 함수는 특정 조건에 부합하는 배열의 모든 값을 배열 형태로 리턴합니다. 

 

두 함수를 사용하여 배열에 중복된 값을 제거할 수 있습니다.

 

const arr = [1, 2, 3, 1, 2];

const uniqueArr = arr.filter((element, index)=>{
    return arr.indexOf(element) === index;
});

console.log(Array.isArray(uniqueArr));   // true
console.log(uniqueArr);   // 1, 2, 3

 

arr.filter(callbac);

filter() 함수는 arr의 원소들을 callback 함수로 전달하여

각 원소들이 callback 함수에 정의된 기준에 부합하는지 검사하고,

검사 결과가 true를 리턴하는 원소만을 모아서 배열 형태로 리턴합니다.

 

arr.indexOf(element) === index;

filter() 함수로 전달된 callback 함수는 검사하고 있는 값(element)이 배열(arr)에서 가장 처음으로 나타나는 index와

검사하고 있는 원소의 index와 비교하여 같을 경우에만 true를 리턴합니다.

위의 예제에서 arr의 값이 순서대로 전달되면 'arr.indexOf(element) === index' 구문은

true, true, true, false, false 를 순서대로 리턴하여 중복되는 값이 첫번째로 나타나는 경우에만 filter 함수에서 걸러지도록 하였습니다. 

 

 

3. forEach(), includes()

forEach() 함수는 주어진 배열을 순회하면서, 배열의 원소들로 주어진 callback 함수를 실행합니다. 

includes() 함수는 주어진 배열에 특정 값이 포함되어있는지 여부를 검사합니다. 

 

const arr = [1, 2, 3, 1, 2];

let uniqueArr = [];

arr.forEach((element)=>{   // arr 배열을 순회
    if(!uniqueArr.includes(element)){   // uniqueArr가 배열의 원소를 가지고 있지 않다면
        uniqueArr.push(element);   // 원소를 넣어준다
    }
});

console.log(Array.isArray(uniqueArr));   // true
console.log(uniqueArr);   // 1, 2, 3