꾸생의 블로그 :: 자바스크립트 Set 객체로 중복제거

최근 Vue2로 작성된 컴포넌트를 유지보수하는 업무를 맡게 되었다. 코드를 보다가 Set()이라는 키워드를 처음 봤다. Set 키워드는 생소해서 알아봤더니 객체 배열에 중복을 제거하는 방법으로 사용되고 있었다. 몰랐던 것이니 얼른 글로 남겨본다.

Set

Set 객체는 자료형에 관계없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있다고 한다. 이 말은 즉, 유일한 값만 저장할 수 있으니 중복된 데이터를 넣으면 1개만 남는다는 얘기

Set 사용법


const temp = ['1', '2', '3', '4', '5', '3', '5'] // 테스트 데이터

const set = new Set(temp) // 1. Set 객체 생성
const clearArr = [...set] // 2. 스프레드 연산자로 배열 변환

console.log(clearArr)
// 결과: ['1', '2', '3', '4', '5']

단순 문자열과 숫자 배열의 경우 손쉽게 중복 제거가 가능하다. 하지만 객체의 경우 JSON.stringify()로 문자열 변환 후 중복 제거를 진행해야 하며, key가 같지만 다른 값을 가진 경우는 제거되지 않는다.

객체 중복 제거


const temp = [
  { no: '1' },
  { no: '2' },
  { no: '3' },
  { no: '4' },
  { no: '5' },
  { no: '2' },
  { no: '4' },
  { no: '1' }
]
const set = new Set(temp.map((t) => JSON.stringify(t)))
const clearArr = [...set].map((t) => JSON.parse(t))
console.log(clearArr)
// 결과: [{no: '1'}, {no: '2'}, {no: '3'}, {no: '4'}, {no: '5'}]

key가 같지만 다른 value가 존재한다면 중복 제거가 불가능하다.