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

객체 배열을 다루다 보면 배열 내부의 속성 값에 중복된 데이터가 포함되어 있는 경우가 있습니다. 이번 글에서는 map()과 Set을 활용해 배열 안의 중복 속성 값을 손쉽게 제거하는 방법을 알아보겠습니다.

문제 상황

먼저 다음과 같은 학생 정보 배열이 있다고 가정해 보겠습니다.

var details = [
   {
      studentName: "John",
      studentMarks: [78, 98]
   },
   {
      studentName: "David",
      studentMarks: [87, 87]
   },
   {
      studentName: "Bob",
      studentMarks: [48, 58]
   },
   {
      studentName: "Sam",
      studentMarks: [98, 98]
   },
]

위 코드를 살펴보면 David의 점수 배열 [87, 87]처럼 동일한 값이 반복되는 경우를 확인할 수 있습니다. 우리의 목표는 이러한 중복 값을 제거하고, 중복 제거 후 요소가 하나만 남았다면 배열이 아닌 단일 값으로 변환하는 것입니다.

해결 방법: map()과 Set 조합

중복 제거에는 자바스크립트의 Set 객체가 가장 효과적입니다. Set은 고유한 값만 저장하므로, 스프레드 연산자(...)와 함께 사용하면 배열의 중복 요소를 간단히 걸러낼 수 있습니다. 여기에 각 객체를 순회하며 처리하는 map() 메서드를 결합합니다.

예제 코드

var details = [
   {
      studentName: "John",
      studentMarks: [78, 98]
   },
   {
      studentName: "David",
      studentMarks: [87, 87]
   },
   {
      studentName: "Bob",
      studentMarks: [48, 58]
   },
   {
      studentName: "Sam",
      studentMarks: [98, 98]
   },
]
details.map(tempObj => {
   if (typeof (tempObj.studentMarks) == 'object') {
      tempObj.studentMarks = [... new Set(tempObj.studentMarks)]
      if (tempObj.studentMarks.length == 1) {
         tempObj.studentMarks = tempObj.studentMarks[0]
      }
   }
});
console.log(details);

코드 설명

동작 과정을 단계별로 살펴보면 다음과 같습니다.

1단계: map()으로 배열의 각 객체를 순회합니다.
2단계: typeof 연산자로 studentMarks가 배열(객체 타입)인지 확인합니다.
3단계: new Set()으로 중복 값을 제거한 뒤, 스프레드 연산자로 다시 배열로 변환합니다.
4단계: 중복 제거 후 배열 길이가 1이라면, 배열 대신 단일 값으로 치환합니다.

프로그램 실행 방법

위 프로그램은 Node.js 환경에서 아래 명령어로 실행할 수 있습니다.

node fileName.js

예를 들어 파일 이름이 demo292.js라면 다음과 같이 실행합니다.

node demo292.js

실행 결과

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

PS C:\Users\Amit\javascript-code> node demo292.js
[
   { studentName: 'John', studentMarks: [ 78, 98 ] },
   { studentName: 'David', studentMarks: 87 },
   { studentName: 'Bob', studentMarks: [ 48, 58 ] },
   { studentName: 'Sam', studentMarks: 98 }
]

결과 분석

출력 결과를 보면 David의 [87, 87]은 중복이 제거되어 단일 값 87로, Sam의 [98, 98] 역시 98로 변환된 것을 확인할 수 있습니다. 반면 John과 Bob처럼 중복이 없었던 경우에는 원래의 배열 형태가 그대로 유지됩니다.

이처럼 Set과 map()을 조합하면 별도의 외부 라이브러리 없이도 객체 배열 내부의 중복 속성 값을 깔끔하게 정리할 수 있습니다. 실무에서 API 응답 데이터를 정규화하거나 통계 처리 전 데이터를 정제할 때 유용하게 활용할 수 있는 패턴이니 꼭 기억해 두세요.