ES6 new Set()

Map 과 Set 을 공부하던 중 프론트엔드 개발중 어떻게 녹여내야 할까 고민하던 중 겪은 문제에 대해서 기록해보자

기존에는 카테고리 리스트를 상수데이터로 하드코딩해서 관리해서
새로운 카테고리가 추가될 때 마다 상수데이터를 수정해줘야하는 불편함이 있었는데
es6 문법중 하나인 Set을 사용해서 훨씬 간편하게 카테고리 관리를 할 수 있었다

예시

예를들어 아래와 같은 아이템들이 있을 때

const items = [
  {
    item: "옷1",
    category: "옷",
  },
  {
    item: "바지1",
    category: "바지",
  },
  {
    item: "신발1",
    category: "신발",
  },
  {
    item: "옷2",
    category: "옷",
  },
];

아래 처럼 중복을 제거한 카테고리를 추출할 수 있는데

const set1 = new Set(items.map((item) => item.category));

console.log([...set1]);	// [ '옷', '바지', '신발' ]

set.add 메서드를 활용해서 다른 방식으로 구현해보려던 중 중복제거가 안된 상태로 추출되는 문제가 있었다.

const set2 = new Set();
const map = items.map((item) => item.category)
console.log(map)

set2.add(map);

console.log(...set2);	// [ '옷', '바지', '신발', '옷' ]

이유는 set.add 하는과정에서 map 에서 추출한 배열 그 자체를 추가하고 있었기 때문이다.

console.log(set1);	// Set (3) {"옷", "바지", "신발"} 
console.log(set2);	// Set (1) {["옷", "바지", "신발", "옷"]}

이럴땐 map 보다는 forEach 메서드를 활용하는게 바람직한 방법같다

const set2 = new Set();
items.forEach(item => set2.add(item.category))

console.log([...set2])	// [ '옷', '바지', '신발' ]

추가로 알게된 점

그리고 코드 끄적거려보던 중 아래 처럼 map에 할당된 배열을 두번 add 할 경우 중복제거가 되고

1. 
const set2 = new Set();
const map = items.map((item) => item.category)

set2.add(map);
set2.add(map);

console.log(set2);	
// Set(1) {[ '옷', '바지', '신발', '옷' ],}

아래 처럼 할당되지 않은 배열을 여러번 add 할 경우 중복제거가 되지 않는 이유가 뭔지 고민해봤더니

2.
const set2 = new Set();
const map = items.map((item) => item.category)

set2.add(items.map((item) => item.category))
set2.add(items.map((item) => item.category))

console.log(set2);
// Set(2) {[ '옷', '바지', '신발', '옷' ], [ '옷', '바지', '신발', '옷' ],}

변수에 할당된 배열을 여러번 add 하는 경우 ( 1번 )는
배열의 참조 주소가 변수에 할당되어 있기 때문에 같은 값이라고 인지를 하고
변수에 할당되지 않은 배열을 여러번 add 하는 경우 ( 2번 )는
배열의 참조 주소가 매번 바뀌어서 다른 값이라고 인지를 하기 때문인 것 같다

참고한 글

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set
https://ko.javascript.info/map-set#ref-735
https://stackoverflow.com/questions/50881453/how-to-add-an-array-of-values-to-a-set