JavaScript 배열에서 중복 요소의 모든 인스턴스 제거하기

배열을 입력받아 모든 중복 값을 제거한 새로운 배열을 반환하는 함수를 작성해야 합니다. 여기서 핵심은 단순히 중복을 하나만 남기는 것이 아니라, 원본 배열에서 두 번 이상 등장한 값이라면 새 배열에는 한 번도 포함되지 않아야 한다는 점입니다.

문제 예시

예를 들어 입력 배열이 다음과 같다면,

const arr = [763,55,43,22,32,43,763,43];

기대하는 출력 결과는 아래와 같습니다.

const output = [55, 22, 32];

위 예시에서 763과 43은 각각 두 번 이상 등장했기 때문에 결과 배열에서 완전히 제외됩니다.

핵심 메서드 살펴보기

이 문제를 해결하기 위해 자바스크립트 배열의 두 가지 기본 메서드를 활용할 수 있습니다.

Array.prototype.indexOf()

검색하려는 값이 배열에 존재하면 첫 번째로 등장하는 인덱스를 반환하고, 존재하지 않으면 -1을 반환합니다.

Array.prototype.lastIndexOf()

검색하려는 값이 배열에 존재하면 마지막으로 등장하는 인덱스를 반환하고, 존재하지 않으면 -1을 반환합니다.

즉, 어떤 요소의 첫 번째 인덱스와 마지막 인덱스가 서로 같다면 그 요소는 배열에 단 한 번만 등장한 고유한 값이라는 뜻입니다. 반대로 두 값이 다르다면 해당 요소는 최소 두 번 이상 등장한 중복 값이므로 제거 대상이 됩니다.

구현 코드

filter() 메서드와 위 두 메서드를 조합하면 간결하게 해결할 수 있습니다.

const arr = [763,55,43,22,32,43,763,43];
const deleteDuplicate = (arr) => {
    const output = arr.filter((item, index, array) => {
        return array.indexOf(item) === array.lastIndexOf(item);
    });
    return output;
};
console.log(deleteDuplicate(arr));

코드 동작 원리

filter()는 배열의 각 요소를 순회하면서 콜백 함수가 true를 반환하는 요소만 남깁니다. 콜백 함수 내부에서 indexOf(item)과 lastIndexOf(item)의 결과를 비교하여, 두 값이 일치하는(즉, 한 번만 등장하는) 요소만 새 배열에 포함시킵니다.

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다.

[ 55, 22, 32 ]

이처럼 indexOf()와 lastIndexOf()를 비교하는 방식은 별도의 추가 데이터 구조 없이도 중복 요소를 손쉽게 걸러낼 수 있는 실용적인 접근 방법입니다.