🙆🏻‍♀️ [JS] Map & Set 🙆🏻‍♀️

ES6에 추가된 자료구조

실제 사용하기 전까지 이런 게 있구나... 하고 넘어간 과거의 내 자신을 딱콩하고 싶을 만큼 잘 쓰고 있는 Map과 Set!

리액트 프로젝트 중 데이터의 불변성을 지켜야 하는데ㅠㅠ useState의 세터 함수는 비동기적이고...ㅠㅠ 어떡하지 할 때 알게 된 Map&Set...☆
Object의 API들만 깔짝깔짝 써봤던 내게 신세계였다.

덕분에 필터링, 삭제, 넘겨오는 값에 따라 특정 변수 호출하기 등등 유용하게 사용중이다.

맵(Map)

키(Key)와 값(value)을 저장하는 객체.
Map은 키값으로 객체를 사용할 수도 있고 값이 저장된 순서를 기억한다는 점에서 객체와 다르다.
키값은 중복될 수 없고 만약 같은 키값으로 다른 값을 추가하면 기존의 값을 덮어 씌운다.

• new Map(): 새로운 맵을 만든다.

let colorMap = new Map());

• colorMap.set(key, value): 키와 값을 설정한다.

// set을 호출할 때 마다 자신을 반환하므로 체이닝이 가능하다.
colorMap.set(1, "red");
  .set(2, "orange");
  .set(3, "yellow");
.
.
.

위와 같이 해줘도 되지만, 나는 주로 아래와 같이 사용한다.

const colorMap = new Map([
  [1, "red"],
  [2, "orange"],
  [3, "yellow"],
  .
  .
  .
]);

• colorMap.get(key): key에 해당하는 값을 반환한다.

colorMap.get(1); // "red"

// ex. 넘겨 받은 값에 따라 폰트 색이 달라야 할 때.
{list.map(item => <span className={colorMap.get(item.code)}>
                    list.status
                  </span>)}

• colorMap.has(key): key가 있으면 true, 없으면 false를 반환한다.
  (웹소켓으로 데이터 갱신 시, 있는 값이면 갱신해주고 없으면 새로 추가해줄 때 사용했었다.)
• colorMap.size: Map안에 개수를 반환한다. for구문 없이 메서드 하나만 쓰면 되다니...!
• colorMap.delete(key): key에 해당하는 값을 삭제한다.
• colorMap.clear(): Map을 비운다.
• colorMap.keys(): Map 안의 키(key)들을 반복 가능한(iterable) 객체로 반환한다.

colorMap.keys(); // MapIterator {1, 2, 3 …}

• colorMap.values(): Map 안의 값(value)들을 반복 가능한(iterable) 객체로 반환한다.

colorMap.values(); // MapIterator {"red", "orange", "yellow" …}

• colorMap.entries(): Map 안의 키(key)-값(value) 쌍들을 반복 가능한(iterable) 객체로 반환한다.

colorMap.entries();
// MapIterator {"red" => 1, "orange" => 2, "yellow" => 3 …}

셋(Set)

Map과 비슷하지만 Set은 중복되지 않는 값(value)들만을 모아 놓은 객체.
비슷하다고 말한 것처럼 사용하는 메서드도 비슷하다.

• new Set(): 새로운 셋을 만든다.

// ()안에는 반복 가능한 객체를 넣어준다.
let idxSet = new Set([1, 2, 3]);

• idxSet.add(value): 값을 추가하고 셋 자신을 반환한다.

 idxSet.add(3); // 1,2,3 중복 허용 X

• idxSet.has(value): Set 내에 값이 있으면 true, 없으면 false를 반환한다.
• idxSet.delete(value): 값을 제거한다.
• idxSet.size: Set 안에 있는 값들의 개수를 반환한다.
• idxSet.clear(): Set을 비운다.
  (필터링 하는 컴포넌트를 벗어날 때 설정된 값을 비워야 했기에, useEffect 리턴 함수에 넣어 사용했었다.)

Set도 Map과 같이 keys(), values(), entries() 사용이 가능하다.
값들만 모아놨는데 왜? 라는 의문이 생겼는데 Map과의 호환성을 위해서 란다.

Set은 백에 사용자가 선택한 것들의 타입을 중복 없이 넘겨줄 때나 필터링할 때 정말 유용하게 사용했다.

// ex. 시용자가 선택한 타입들 [a, b, c, a, a, b, c, a]
 const typeSet = new Set([a, b, c, a, a, b, c, a]); // a, b, c

Set이 반환하는 것은 이터러블 객체이기 때문에 넘겨줄 때는 배열로 만들어서 보내야 했다.

// spread 연산자를 사용하거나
const typeList = [...typeSet];

// Array.from()를 사용한다.
const typeList = [Array.from(typeSet)];

세상에, 간단해😏

앞으로도 쓸 일이 많을 Map과 Set!
정말 사랑해 마지 않는다😊
워크맵과 워크셋도 있지만 그것은 다시 실무에 사용할 일이 생긴다면... 배워볼 예정이다.
[단독] 정말 자바스크립트... "배울수록 어려워..." 고통 호소하기도...

끝으로 내가 정말 자주 정독하고자 노력하는 사이트...☆

맵과 셋 - 코어 자바스크립트