map? 그냥 배열 메서드아냐?, 응 아니야 이번엔 자료구조야

현실 세계의 자료들을 object와 array만으로 관리하는 것은 한계가 있기 때문에 map과 set이 등장하게 되었다.

set은 전에 블로그에서 이미 다루었고 이번엔 map에 대해서 적어보고자 한다.

🗺 map이 무엇인가

map은 키와 값으로 이루어졌다는 점에서 object와 유사하지만, map은 object와는 달리 키에 다양한 자료형을 허용한다는 점에서 차이가 있다.

map을 어떻게 써먹을 수 있는가

맵의 주요 property와 method는 다음과 같다.

• new Map(): map 만들기
• map.set(key, value): map에 key를 이용하여 value 저장
• map.get(key): map에서 key에 해당하는 값 반환(없으면 undefined)
• map.has(key): map에 key가 존재하는지 여부(boolean 값) 반환
• map.delete(key): map에서 key에 해당하는 값 삭제
• map.clear(): map의 모든 요소 제거
• map.size: 요소의 개수 반환

let map = new Map(); // map 만들기

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

let obj = {obj: true};
map.set(obj, 'obj1');

console.log(map); // 아래와 같이 나타난다.
// Map(4) {
// '1' => 'str1',
// 1 => 'num1',
// true => 'bool1',
// {...} => 'obj1'
// }

map.get('1'); // 'str1'
map.get(1); // 'num1'
map.get(obj); // 'obj1'
map.size // 4

map과 object의 다른 점 또 하나는
object는 키를 문자형으로 변환하지만
map은 키의 타입을 그대로 유지한다는 것이다.

let 회원1 = {이름: '개똥이'}; // object
let 회원2 = {이름: '소똥이'};
let 회원별방문수 = {};
회원별방문수[회원1] = 3; // 회원1은 3번 방문했다.
회원별방문수[회원2] = 5; // 회원2는 5번 방문했다.

console.log(회원별방문수)
// {[object Object]: 5}
console.log(회원별방문수[object Object]) // 5

object의 키를 object로 지정할 수는 있지만
object는 모든 키를 문자형으로 변환시키기 때문에
회원별방문수에 회원1, 회원2 키는 모두 '[object Object]'가 된다.
따라서 위의 예시에서는 의도와 달리 회원별방문수객체가
두 개의 키를 동일한 키로 인식하여 마지막에 할당한 5의 값만 남게 된 것이다.

map을 활용하여 어떤 것을 할 수 있는가

map은 다음과 같이 키, 값, 키값쌍을 추출해낼 수 있다.

let 가격표 = new Map([
  ['원조김밥', 2000],
  ['참치김밥', 3500],
  ['치즈김밥', 3000],
]);

for( let 메뉴 of 가격표.keys() ) { console.log(메뉴) };
// 원조김밥
// 참치김밥
// 치즈김밥

for( let 가격 of 가격표.values() ) { console.log(가격) };
// 2000
// 3500
// 3000

for( let 메뉴별가격 of 가격표 ) { console.log(메뉴별가격) };
                      ⬆️ 가격표.entries() 라고 써도 됨.
// ['원조김밥', 2000]
// ['참치김밥', 3500]
// ['치즈김밥', 3000]

// forEach 메서드를 사용할 수 있다.
가격표.forEach( (가격, 메뉴) => { console.log(`${메뉴}: ${가격}`) } );
// 원조김밥: 2000
// 참치김밥: 3500
// 치즈김밥: 3000

map은 object와는 달리 값이 삽입된 순서대로 순회한다.

reference

https://ko.javascript.info/map-set