자바스크립트 배열에서 중복 항목 제거하는 방법

숫자나 문자열 리터럴로 구성된 배열 안에 중복된 값이 포함되어 있을 때, 새로운 배열을 만들거나 중복 값을 별도의 공간에 저장하지 않고 원본 배열에서 바로 제거해야 하는 경우가 있습니다.

이럴 때 Array.prototype.splice() 메서드를 사용하면 배열 내부에서(in-place) 항목을 직접 제거할 수 있습니다. 여기에 Array.prototype.indexOf()와 Array.prototype.lastIndexOf() 메서드를 함께 활용하면 특정 요소가 중복되었는지 손쉽게 판별할 수 있습니다.

동작 원리

indexOf()는 배열에서 해당 요소가 처음 등장하는 인덱스를, lastIndexOf()는 마지막으로 등장하는 인덱스를 반환합니다. 두 값이 서로 다르다면 그 요소가 배열에 두 번 이상 존재한다는 뜻이므로 중복으로 판단하고, splice()를 호출해 현재 위치의 요소를 제거합니다.

예제

const arr = [1, 4, 6, 1, 2, 5, 2, 1, 6, 8, 7, 5];
arr.forEach((el, ind, array) => {
    if(array.indexOf(el) !== array.lastIndexOf(el)){
        array.splice(ind, 1);
    }
});
console.log(arr);

실행 결과

위 코드를 실행하면 콘솔에 다음과 같은 결과가 출력됩니다.

[
    4, 1, 5, 2,
    6, 8, 7
]

forEach()로 배열을 순회하는 동안 각 요소의 첫 번째 인덱스와 마지막 인덱스를 비교하고, 두 값이 일치하지 않으면 중복으로 간주하여 splice()로 제거함으로써 원본 배열 자체에서 중복 항목이 정리됩니다.