[JavaScript] 배열안의 중복 원소 제거하기 (filter, indexOf)

What

특정 배열안의 원소가 [1, 2, 3, 1, 2, 3]이 있다고 하자. 그런데, 나는 1, 2, 3이 반복이 되므로 중복된 원소는 제거해서 [1, 2, 3]이라는 깔끔한 배열로 만들고 싶다. 그럴 땐, filter()와 indexOf()을 활용하여 쉽게 중복 원소를 제거할 수 있다.

 

How

const arr = [3, 2, 5, 3, 2, 6, 5, 4];

const filterArr = arr.filter((el, idx) => {
    return arr.indexOf(el) === idx;
})

console.log(filterArr); // [3, 2, 5, 6, 4]

지저분한 중복 원소들로 가득찬 arr 배열이 있다. 이제 다음 단계들을 거쳐서 깔끔하게 중복 원소들을 제거해보자.

 

1) 우선 걸러야 하는 작업이니까 filter()를 사용한다. filter()는 콜백 함수를 사용하는 메서드로, 매개변수로 원소(el)과 인덱스(idx)를 넣고 return으로 값을 반환하도록 하였다.

 

2) 참고로 filter()는 값이 true면 반환하고, false면 제거하는 기능을 한다. 따라서, return 값으로는 boolean 타입의 값이 나와야 하기 때문에 return에 === 연산자를 사용하였다.

 

3) indexOf(el)는 배열안의 원소(el)의 인덱스를 반환하는 메서드다. 만약, 중복되는 원소가 있을 시 가장 앞에 있는 원소의 인덱스를 반환한다는 특성을 가진다.

 

4) 중복 원소를 다르게 생각하면, 중복 원소는 원소 앞에 나와 같은 원소가 있다는 뜻이다. 따라서 indexOf()는 뒤에 있는 중복 원소를 인식하지 못한다. 이런 원리로 중복 제거가 일어나는 것이다.

 

정리하자면, indexOf()에 인식되지 못한 중복 원소들은 모두 false를 반환하여 filter()에 걸러지게 되는 원리이다.

 

1. 배열안에 뭔가를 걸러야 한다? => filter()
2. 그런데 그게 중복이다? => indexOf()