[JS 자료구조와 자료형] Map / Set

코테 준비와 함께 JS기본기를 탄탄히 하고자 작성.
JS 기본 문법 정리
본 내용은 모두
https://ko.javascript.info/
내용을 참조하여 작성

이번에 코딩테스트하면서 Set에 대한 기본 개념이 부족해 Map으로 풀이하면서 더 쉽게 풀 수 있는 문제를 어렵게 풀이.
반성하는 의미로 Map과 Set에 대한 내용 공부

Map

• 키가 있는 데이터를 저장한다는 점에서 객체와 유사
• 다만 맵의 경우 다양한 자료형을 허용
• 맵은 객체와 다르게 key를 문자형으로 변환하지 않으며 자료형 제약이 없다. = 객체 또한 키가 될 수 있음

// eg 
let john = { name: "John" }; 

// 고객의 가게 방문 횟수를 세본다고 가정해 봅시다. 
let visitsCountMap = new Map(); 
// john을 맵의 키로 사용하겠습니다. 
visitsCountMap.set(john, 123); alert( visitsCountMap.get(john) ); // 123

맵이 키를 비교하는 방식
맵은 SameValueZero라 불리는 알고리즘을 사용해 값의 등가 여부를 확인합니다.
이 알고리즘은 일치 연산자 ===와 거의 유사하지만,
NaN과 NaN을 같다고 취급하는 것에서 일치 연산자와 차이가 있습니다.
따라서 맵에선 NaN도 키로 쓸 수 있습니다.
이 알고리즘은 수정하거나 커스터마이징 하는 것이 불가능합니다.

Map의 주요 메서드와 프로퍼티

• new Map() 맵을 만듦
• map.set(key, value) - key를 이용해 value 저장
  • map.set 호출시 맵 자신이 반환된다. 이를 이용해 체이닝하여 연속해 set() 메서드를 사용 가능.

    map.set('1', 'str1')
    .set(1, 'num1')
    .set(true, 'bool1');

• map.get(key) - key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환
• map.has(key) - key 존재여부에 따라 true/false 반환
• map.clear() - 맵 안의 모든 요소 제거
• map.size - 요소 개수 반환

Map 요소 반복 작업하기

• map.keys() – 각 요소의 키를 모은 반복 가능한(iterable, 이터러블) 객체를 반환.
• map.values() – 각 요소의 값을 모은 이터러블 객체를 반환.
• map.entries() – 요소의 [키, 값]을 한 쌍으로 하는 이터러블 객체를 반환. 이 이터러블 객체는 for..of반복문의 기초로 쓰인다.

맵은 삽입 순서를 기억합니다.
맵은 값이 삽입된 순서대로 순회를 실시합니다.
객체가 프로퍼티 순서를 기억하지 못하는 것과는 다릅니다.
배열과 유사하게 내장메서드 forEach도 지원합니다.

Object.entries를 활용해 객체를 맵으로 바꾸기

let obj = {
  name: "John",
  age: 30
};

let map = new Map(Object.entries(obj));

console.log( map.get('name') ); // John

Object.fromEntries를 활용해 맵을 객체로 바꾸기

let map = new Map();
map.set('banana', 1);
map.set('orange', 2);
map.set('meat', 4);

let obj = Object.fromEntries(map.entries()); // 맵을 일반 객체로 변환
// let obj = Object.fromEntries(map); // .entries()를 생략함. 
// 위와 동일한 코드이며 Object.fromEntries는 인수로 이터러블 객체를 받기 때문에 짧게 줄인 코드도 이전 코드와 동일하게 동작

// 맵이 객체가 되었습니다!
// obj = { banana: 1, orange: 2, meat: 4 }

console.log(obj.orange); // 2

위의 두가지를 알았으면 좀 더 효율적인 코딩테스트 코드 작성이 가능했을 것 같아 기록.

Set

중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션.
Set에서 키가 존재하지 않으면 저장된다.

주요 메서드

• new Set(iterable) – Set 생성. 이터러블 객체를 전달받으면(대개 배열을 전달받음) 그 안의 값을 복사해 셋에 넣어준다.
• set.add(value) – 값을 추가하고 Set 자신을 반환.
• set.delete(value) – 값을 제거. 호출 시점에 Set 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환.
• set.has(value) – Set 내 값 존재여부에 따라 true/false 반환.
• set.clear() – Set 비움.
• set.size – Set 길이값 반환.

셋 대신 배열을 사용하여 방문자 정보를 저장한 후,
중복 값 여부는 배열 메서드인 arr.find를 이용해 확인할 수도 있습니다.
하지만 arr.find는 배열 내 요소 전체를 뒤져 중복 값을 찾기 때문에, 셋보다 성능 면에서 떨어집니다.
반면, 셋은 값의 유일무이함을 확인하는데 최적화되어있습니다.

Set 값에 반복작업하기

Set 또한 .forEach를 지원하는데 콜백 함수가 받는 세개의 인수 중 첫 번째도 값, 두번째도 같은 값을 받으며 세번째는 목표 객체인 Set이다. 이러한 이유는 Map과의 호환성 때문으로 덕분에 Map -> Set, Set -> Map 전환이 쉽다.

set.forEach((value, valueAgain, set) => {
  alert(value);
});

 

셋에도 맵과 마찬가지로 반복 작업을 위한 메서드가 있습니다.
set.keys() – 셋 내의 모든 값을 포함하는 이터러블 객체를 반환합니다.
set.values() – set.keys와 동일한 작업을 합니다. 맵과의 호환성을 위해 만들어진 메서드입니다.
set.entries() – 셋 내의 각 값을 이용해 만든 [value, value] 배열을 포함하는 이터러블 객체를 반환합니다.
맵과의 호환성을 위해 만들어졌습니다.