자바스크립트 Map객체

Map

Map 객체는 키와 값의 쌍으로 이루어진 컬렉션

구분객체Map 객체

키로 사용할 수 있는 값	문자열 또는 심벌 값	객체를 포함한 모든 값
이터러블	X	O
요소 개수 확인	Object.keys(obj).length	map.size

 Map 객체의 생성

Map 객체는 Map 생성자 함수로 생성

const map = new Map();
console.log(map); // Map(0) {}

Map 생성자 함수는 이터러블을 인수로 전달받아 Map 객체를 생성

const map1 = new Map([['key1', 'value1'],['key2','value2']])
console.log(map1); // Map(2) {'key1' => 'value1', 'key2' => 'value2'}

Map 생성자 함수는 중복된 키를 갖는 요소가 있으면 덮어씌움

const map = new Map(['key1','value1'],[['key1','value2'])
console.log(map); // Map(1) {'key1' => 'value2'}

요소 개수 확인

Map.prototype.size

const {size} = new Map([['key1', 'value1'], ['key2', 'value2']]);
console.log(size); // 2

const map = new Map([['key1', 'value1'], ['key2', 'value2']]);

set.size = 10; // 무시된다
console.log(map.size); // 2

요소 추가

Map.prototype.set

const map = new Map();
console.log(map); // Map(0) {}

map.set('key1', 'value1').set('key2', 'value2');
console.log(map); // Map(2) {'key1' => 'value1', 'key2' => 'value2'}

Map 객체는 키 타입에 대한 제한이 x

const map = new Map();

const lee = {name : 'Lee'};
const kim = {name: 'Kim'};

// 객체도 키로 사용 가능
map.set(lee, 'developer').set(kim, 'designer');

console.log(map) 
// Map(2) {{name: 'Lee'} => 'developer', {name: 'Kim'} => 'designer'}

요소 취득

Map.prototype.get

const map = new Map();

const lee = {name : 'Lee'};
const kim = {name: 'Kim'};

map.set(lee, 'developer').set(kim, 'designer');

console.log(map.get(lee)); // developer
console.log(map.get('key'); // undefined 

요소 존재 여부 확인

Map.prototype.has

const map = new Map();

const lee = {name : 'Lee'};
const kim = {name: 'Kim'};

map.set(lee, 'developer').set(kim, 'designer');

console.log(map.has(lee)); // true
console.log(map.has('key'); // false 

요소 삭제

Map.prototype.delete

const lee = {name : 'Lee'};
const kim = {name: 'Kim'};

const map = new Map([[lee, 'developer'], [kim, 'designer']])

map.delete(kim)
console.log(map); 
// Map(1) {{name: 'Lee'} => 'developer'}

map.delete('key'); // 에러 없이 무시됨
console.log(map); 
// Map(1) {{name: 'Lee'} => 'developer'}

요소 일괄 삭제

Map.prototpye.clear

const lee = {name : 'Lee'};
const kim = {name: 'Kim'};

const map = new Map([[lee, 'developer'], [kim, 'designer']])

map.clear();
console.log(map); 
// Map(0) {}

요소 순회

• Map 객체의 요소를 순회하려면 Map.prototype.forEach 메서드를 사용한다.
• Map.prototype.forEach 메서드는 Array.prototype.forEach 메서드와 유사하게 콜백 함수와 forEach 메서드의 콜백 함수 내부에서 this로 사용될 객체(옵션)를 인수로 전달한다.
• 이때 콜백 함수는 다음과 같이 3개의 인수를 전달받는다.

- 첫 번째 인수: 현재 순회 중인 요소값
- 두 번째 인수: 현재 순회 중인 요소키
- 세 번째 인수: 현재 순회 중인 Map 객체 자체

const lee = { name: 'Lee' };
const kim = { name: 'Kim' };

const map = new Map([[lee, 'developer'], [kim, 'designer']]);

map.forEach((v, k, map) => console.log(v, k, map));
/*
developer {name: "Lee"} Map(2) {
	{name: "Lee"} => "developer",
    {name: "Kim"} => "designer"
    }
designer {name: "Kim"} Map(2) {
	{name: "Lee"} => "developer",
    {name: "Kim"} => "designer"
    }
*/

Map 객체는 이터러블이다. 따라서 for ... of 문으로 순회할 수 있으며, 스프레드 문법과 배열 디스트럭처링 할당의 대상이 될 수도 있다.

const lee = { name: 'Lee' };
const kim = { name: 'Kim' };

const map = new Map([[lee, 'developer'], [kim, 'designer']]);

// Map 객체는 Map.prototype의 Symbol.iterator 메서드를 상속받는 이터러블이다.
console.log(Symbol.iterator in map); // true

// 이터러블인 Map 객체는 for ... of 문으로 순회할 수 있다.
for (const entry of map) {
  console.log(entry); // [{name: "Lee"}, "developer"] [{name: "Kim"}, "designer"]
}

// 이터러블인 Map 객체는 스프레드 문법의 대상이 될 수 있다.
console.log([...map]);
// [{name: "Lee"}, "developer"] [{name: "Kim"}, "designer"]

// 이터러블인 Map 객체는 배열 디스트럭처링 할당의 대상이 될 수 있다.
const [a, b] = map;
console.log(a, b); // [{name: "Lee"}, "developer"] [{name: "Kim"}, "designer"]