JavaScript에서 배열의 0번째 인덱스를 비교해 중복 값 제거하는 방법

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

var subjectNameAlongWithMarks = [
    ["JavaScript", 78],
    ["Java", 56],
    ["JavaScript", 58],
    ["MySQL", 77],
    ["MongoDB", 75],
    ["Java", 98]
]

위 배열에는 과목명이 중복된 항목들이 포함되어 있습니다. 각 항목의 0번째 인덱스(과목명)를 비교하여 중복된 값을 제거하려면, JavaScript의 Set() 객체를 활용하면 간단하게 해결할 수 있습니다.

예제

var subjectNameAlongWithMarks = [
    ["JavaScript", 78],
    ["Java", 56],
    ["JavaScript", 58],
    ["MySQL", 77],
    ["MongoDB", 75],
    ["Java", 98]
]
var distinctResult = subjectNameAlongWithMarks.filter(function ([value]){
    return !this.has(value) && !!this.add(value)
}, new Set())
console.log(distinctResult);

코드 설명

filter() 메서드의 두 번째 인수로 new Set()을 전달하면, 콜백 함수 내부에서 this가 해당 Set 객체를 가리키게 됩니다. 콜백 함수는 구조 분해 할당(destructuring)을 통해 각 배열 요소의 0번째 인덱스 값, 즉 과목명을 추출합니다. 그런 다음 this.has(value)로 해당 값이 Set에 이미 존재하는지 확인하고, 존재하지 않을 경우에만 true를 반환하며 동시에 this.add(value)로 Set에 값을 추가합니다. 이 과정을 거치면 과목명을 기준으로 중복이 제거된 새로운 배열을 얻을 수 있으며, 중복 시 먼저 등장한 항목이 유지됩니다.

위 프로그램을 실행하려면 다음 명령어를 사용합니다.

node fileName.js

출력 결과

여기서는 파일 이름이 demo196.js입니다. 프로그램을 실행하면 다음과 같은 결과가 출력됩니다.

PS C:\Users\Amit\javascript-code> node demo196.js
[
    [ 'JavaScript', 78 ],
    [ 'Java', 56 ],
    [ 'MySQL', 77 ],
    [ 'MongoDB', 75 ]
]

결과를 보면 0번째 인덱스의 과목명이 중복되었던 "JavaScript"(58점)와 "Java"(98점) 항목이 제거되고, 각 과목별로 처음 등장한 항목만 남은 것을 확인할 수 있습니다.