자바스크립트(JavaScript) 배열에서 중복을 제거하고 고유한 요소만 추출하는 방법

실무에서 배열을 다루다 보면 중복된 값이 섞여 있는 경우가 많습니다. 이럴 때 고유한(unique) 요소만 남기고 나머지는 제거해야 할 필요가 생기죠. 이번 글에서는 자바스크립트의 filter() 메서드를 활용해 배열에서 중복을 손쉽게 제거하는 방법을 알아보겠습니다.

중복이 포함된 배열 예시

다음과 같이 중복된 숫자가 들어 있는 배열이 있다고 가정해 보겠습니다.

var duplicateNumbers = [10, 20, 100, 40, 20, 10, 100, 1000];

우리가 원하는 최종 결과물은 다음과 같습니다.

[10, 20, 100, 40, 1000]

filter() 메서드로 중복 제거하기

중복 없이 고유한 값만 남기려면 filter() 메서드를 사용하면 됩니다. 핵심 아이디어는 간단합니다. 현재 요소의 값(value)이 배열에서 처음 등장한 위치(index)와 현재 인덱스가 일치하는 경우에만 통과시키는 것입니다. 만약 같은 값이 앞서 이미 등장했다면 indexOf()가 반환하는 위치가 현재 인덱스와 달라지므로, 해당 요소는 자동으로 걸러집니다.

예제 코드

다음은 전체 코드입니다.

var duplicateNumbers = [10, 20, 100, 40, 20, 10, 100, 1000];
console.log("중복이 포함된 배열=");
console.log(duplicateNumbers);

var noDuplicateNumbersArray = duplicateNumbers.filter(function (value, index, array) {
    return array.indexOf(value) === index;
});

console.log("중복이 제거된 배열=");
console.log(noDuplicateNumbersArray);

프로그램 실행 방법

위 코드를 실행하려면 Node.js 환경에서 다음 명령어를 입력하면 됩니다.

node fileName.js

여기서는 파일 이름이 demo234.js라고 가정하겠습니다.

실행 결과

위 프로그램을 실행하면 다음과 같은 결과가 출력됩니다.

PS C:\Users\Amit\JavaScript-code> node demo234.js
중복이 포함된 배열=
[
    10,   20, 100,
    40,   20,  10,
   100, 1000
]
중복이 제거된 배열=
[ 10, 20, 100, 40, 1000 ]

참고: Set 객체를 활용한 더 간단한 방법

ES6부터는 Set 객체를 이용하면 한 줄로도 중복을 제거할 수 있습니다. Set은 중복 값을 허용하지 않는 자료구조이기 때문입니다.

var noDuplicateNumbersArray = [...new Set(duplicateNumbers)];
console.log(noDuplicateNumbersArray); // [10, 20, 100, 40, 1000]

filter() 방식은 동작 원리를 명확히 이해할 수 있다는 장점이 있고, Set 방식은 코드가 훨씬 간결하다는 장점이 있습니다. 상황에 맞게 선택해서 사용하시면 됩니다.