1월12일

JavaScript - Map 자료형 vs Object 자료형

Object 자료형

먼저 Map을 배우기 앞서 익숙한 Object 자료형에 대해 간단히 정리해보자

Object 자료형에 대해 key와 value를 얻으려면 아래와 같은 두가지 방법이 있다.

 

Object.keys()

const arr = {'a': 1, 'b': 2};

Object.keys(arr).forEach((key) => {
  console.log(key, arr[key]);
})
// a 1
// b 2

for in

const arr = {'a': 1, 'b': 2};

for (key in arr) {
  console.log(key, arr[key]);
}
// a 1
// b 2

Object.values()

values만 따로 얻고 싶다면 아래와 같이 쓴다.

const arr = {'a': 1, 'b': 2};

Object.values(arr).forEach((value) => {
  console.log(value);
})

특이사항

추가로 Object는 key를 문자형으로 변환한다.

obj = {};
obj['55'] = 'str55'
// console.log(obj);  // str55
obj[55] = 'int55'
console.log(obj['55']);  // int55
console.log(obj[55]);  // int55

 

Map 자료형

set()

하지만 Map 자료형에서는 key의 타입을 변화시키지 않고 그대로 유지한다.

const m = new Map();
m.set('55', 'str55');
m.set(55, 'int55');

console.log(m);  // Map(2) { '55' => 'str55', 55 => 'int55' }

get(key), size

key를 알고 있다면 get()을 통해 값을 꺼낼 수 있고, size를 통해 몇개가 들었는지 확인할 수 있다.

 

const m = new Map();
m.set('55', 'str55');
m.set(55, 'int55');

console.log(m.get(55));  // int55
console.log(m.get('55'));  // str55
console.log(m.size);  // 2

forEach

Map은 forEach()를 지원하는데 아래와 같이 사용할 수 있다.

const m = new Map();
m.set('55', 'str55');
m.set(55, 'int55');
m.set('key1', 'value1');
m.set('key2', 'value2');


m.forEach((a, b) => {
  console.log(a, b)
})
// str55 55
// int55 55
// value1 key1
// value2 key2

하지만 특이하게도 a, b에 대해 

value, key 순서로 오는 것을 확인할 수 있다.

이 부분이 다른 함수와 다르니 주의하자.