Section 10. 자바스크립트 Map

표준 내장 객체 중 하나로 키와 값의 쌍으로 이루어진 컬렉션을 Map 이라고 한다.

객체와의 차이는 다음과 같다

• 이터러블의 일종이다. (이터러블의 기능 사용 가능)
• 메서드와 프로퍼티 등의 기능 차이가 있다.
• 객체나 배열 등의 참조값을 키로 사용 가능하다.
• 키와 값을 보다 자주 변경하는 경우 적합하도록 설계되었다.

I. 기본 사용법

// Map 생성
const map1 = new Map();

// set 메서드 - 키와 값의 쌍 추가
map1.set('x', 1);
map1.set(123, 'ABC');
map1.set(true, { a: 1, b: 2 });

console.log(map1);

 

[[키 쌍] ...] 배열로 생성 및 초기화

// [[키 쌍]...] 배열로 생성 + 초기화
const map2 = new Map([
  ['x', 1],
  [123, 'ABC'],
  [true, { a: 1, b: 2 }],
]);

console.log(map2);

출력문은 위와 같다.

 

키의 중복이 불가능하다. - 해당 키가 있을 경우 덮어쓴다.

// 키의 중복 불허 - 해당 키 있을 시 덮어씀
map2.set('x', 2);

console.log(map2);

x의 값이 1에서 2로 덮어 쓰여진다. 

 

has - 요소 포함여부를 확인하는 메서드

// has 메서드 - 요소 포함여부 확인
console.log (
  map2.has('x'), //true
  map2.has('y') //false
);

get - 값에 접근하는 메서드

// get 메서드 - 값에 접근
console.log(
  map2.get('x'), //1
  map2.get(123), //'ABC'
  map2.get(true), //{a: 1, b: 2}

  // 없는 키로 접근시
  map2.get('y')
); //undefined

없는 키로 접근하면 undefined를 반환한다는 것을 명심하자.

 

참조값도 키로 사용 가능하다.

// 💡 참조값도 키로 사용 가능
const objKey = { x: 1, y: 2 };
const arrKey = [1, 2, 3];

map2.set(objKey, 'OBJ_KEY');
map2.set(arrKey, 'ARR_KEY');

console.log(map2);

 

참조값도 키로 사용이 가능한 것을 볼 수 있다.

console.log (
  map2.get(objKey),
  map2.get(arrKey),
); //OBJ_KEY ARR_KEY

참조값이 키로 사용이 됐기 때문에 아래와 같은 방식으로는 사용을 할 수 없다.

console.log(
  map2.get({ x: 1, y: 2 }), //undefined
  map2.get([1, 2, 3]) //undefined
);

아래 예시를 보면

map2.set({x: 3, y: 4}, '못꺼냄');

console.log(map2);
console.log(
  map2.get({x: 3, y: 4})
);

map에다 값을 위처럼 넣었다. 이렇게 키 값에 객체를 넣으면 키 값이 객체가 아니라 어딘가에 상수나 변수로 저장되어 있지 않은 해당 참조값이 된다. 그래서 get으로 접근을 했을때 undefined가 반환된 것을 볼 수 있다.

 

delete - 요소 제거 및 성공 여부를 반환하는 메서드

console.log(
  map2.delete('x'),
  map2.delete(objKey),
  map2.delete({x: 3, y: 4})
);

console.log(map2);

 

add 메서드는 결과 맵을 반환한다. 

메서드 체이닝이 가능하다.

const map3 = map2
.set(1, 'X')
.set(2, 'Y')
.set(3, 'Z');

console.log(map2, map3);

 

size - 요소의 개수를 반환하는 프로퍼티

// size 프로퍼티 - 요소의 개수
console.log(
  map2.size
); //7

 

keys, values, entries - 키 / 값 / [키 , 값] 을 반환하는 메서드

console.log(
  map2.keys(),
  map2.values(),
  map2.entries()
);

 

clear - 모든 요소들을 삭제하는 메서드

map2.clear();

console.log(map2, map3);

II. 이터러블러서의 Map

const arr = [
  ['🐶', '강아지'],
  ['🐱', '고양이'],
  ['🐯', '호랑이'],
  ['🐵', '원숭이'],
  ['🐨', '코알라']
];
const map = new Map(arr);

맵을 생성했다.

 

1. for ... of 문

for ([key, value] of map) {
  console.log(key, value);
}
//🐶 강아지
//🐱 고양이
//🐯 호랑이
//🐵 원숭이
//🐨 코알라

2. 스프레드 문법

const newArr = [...map];

console.log(newArr);

3. 디스트럭쳐링

const [x, y] = map;
console.log(x); //['🐶', '강아지']
console.log(y); //['🐱', '고양이']

const [a, b, ...rest] = map;

console.log(a); //['🐶', '강아지']
console.log(b); //['🐱', '고양이']
console.log(rest);

rest의 출력문은 다음과 같다

 

이터러블과 별개로 forEach 메서드도 사용이 가능하다.

map.forEach(console.log);

// 아래의 결과와 같음
// map.forEach((item, idx, set) => {
//   console.log(item, idx, set)
// });