JavaScript 배열에서 중복 값 제거하는 방법

JavaScript로 개발을 하다 보면 배열 안에 동일한 값이 여러 번 중복되어 들어 있는 경우를 자주 마주하게 됩니다. 이럴 때 Set 객체를 활용하면 단 한 줄의 코드로 중복 값을 손쉽게 제거할 수 있습니다.

중복 값이 포함된 배열 예시

다음과 같이 학생 이름 목록에 중복된 값이 섞여 있는 배열이 있다고 가정해 보겠습니다.

const listOfStudentName = ['John', 'Mike', 'John', 'Bob', 'Mike', 'Sam', 'Bob', 'John'];

Set()을 이용한 중복 제거 방법

배열에서 중복된 값을 제거하려면 JavaScript의 Set() 객체를 사용하면 됩니다. Set은 고유한 값만 저장하는 자료구조이기 때문에, 동일한 값이 여러 번 전달되더라도 한 번만 저장됩니다.

스프레드 연산자(...)와 함께 사용하면 Set을 다시 배열 형태로 변환할 수 있습니다.

예제 코드

const listOfStudentName = ['John', 'Mike', 'John', 'Bob', 'Mike', 'Sam', 'Bob', 'John'];
console.log("원본 배열 = " + listOfStudentName);

const doesNotContainSameElementTwice = [...new Set(listOfStudentName)];
console.log("중복 제거 후 배열 = ");
console.log(doesNotContainSameElementTwice);

실행 방법

위 프로그램을 실행하려면 Node.js 환경에서 다음 명령어를 입력합니다.

node fileName.js

여기서는 파일 이름을 demo42.js로 지정했습니다.

실행 결과

위 코드를 실행하면 다음과 같은 출력 결과를 확인할 수 있습니다.

PS C:\Users\Amit\JavaScript-code> node demo42.js
원본 배열 = John,Mike,John,Bob,Mike,Sam,Bob,John
중복 제거 후 배열 = [ 'John', 'Mike', 'Bob', 'Sam' ]

코드 설명

new Set(listOfStudentName): 배열을 Set으로 변환하여 중복 값을 자동으로 제거합니다.
[...new Set()]: 스프레드 연산자를 사용해 Set 객체를 다시 일반 배열로 변환합니다.
결과적으로 원래 8개의 요소가 있던 배열이 4개의 고유한 값만 가진 배열로 정리됩니다.