[Javasciprt] new Map과 {}의 차이점

자바스크립트를 사용할때 JSON 객체나 Map 객체를 초기화를 {} 사용하는 경우가 있다.
이렇게 사용했을때와 new Map()으로 사용했을때의 차이점을 알아보겠다.

var myMap = new Map();
var mapObj = {};

myMap.set('1', 'TEST');

mapObj.set('1', 'TEST'); // mapObj.set is not a function

console.log(myMap.keys()); //[Map Iterator] { '1' }

console.log(mapObj.keys()); // mapObj.keys is not a function

변수의 초기화를 {} 이와같이 한다면 Map객체가 가지고있는 메소드와 속성을 온전히 사용하지 못해서 개발시 불편함이 있을 수 있다.

var map = {
  1: 'A',
  2: 'B',
};

위와같이 사용하는것 보단

아래와 같이 Map객체를 선언해서 사용하는것을 권장한다.

var map = new Map();
map.set('1', 'A');
map.set('2', 'B');

MDN web docs

속성

Map.prototype.constructor
인스턴스의 프로토타입을 만드는 함수를 반환한다. 이것 Map 함수의 기본 값이다.
>> Map.prototype.size
Map 객체에 들어있는 key/value pair의 수를 반환한다.

메서드

Map.prototype.clear()
Map 객체의 모든 key/value pair를 제거한다.
>> Map.prototype.delete(key)
주어진 키(Key)와 해당되는 값(Value)를 제거하고 제거하기 전에 Map.prototype.has(key)가 반환했던 값을 반환한다. 그 후의 Map.prototype.has(key)는 false를 반환한다.
>> Map.prototype.entries()
Map 객체 안의 모든 요소들을 [key, value] 형태의 array 로 집어넣은 순서대로 가지고 있는 Iterator 객체를 반환한다.
>> Map.prototype.forEach(callbackFn[, thisArg])
Map 객체 안에 존재하는 각각의 key/value pair에 집어넣은 순서대로 callbackFn을 부른다. 만약 thisArg 매개변수가 제공되면, 이것이 각 callback의 this 값으로 사용된다.
>> Map.prototype.get(key)
주어진 키(Key)에 해당되는 값(value)을 반환하고, 만약 없으면 undefined를 반환한다.
>> Map.prototype.has(key)
Map 객체 안에 주어진 key/value pair가 있는지 검사하고 Boolean 값을 반환한다.
>> Map.prototype.keys()
Map 객체 안의 모든 키(Key)들을 집어넣은 순서대로 가지고 있는 Iterator 객체를 반환한다.
>> Map.prototype.set(key, value)
Map 객체에 주어진 키(Key)에 값(Value)를 집어넣고, Map 객체를 반환한다.
>> Map.prototype.values()
Map 객체 안의 모든 값(Value)들을 집어넣은 순서대로 가지고 있는 Iterator 객체를 반환한다.
>>Map.prototype@@iterator
Map 객체 안의 모든 요소들을 [key, value] 형태의 array 로 집어넣은 순서대로 가지고 있는 Iterator 객체를 반환한다.

다른 글 읽어보기 ⬇️