[JavaScript] 맵(Map) 이란?

• 키(key)가 있는 데이터를 저장한다는 점에서 객체(Object)와 유사하다.
• 키(key)에 다양한 자료형을 허용한다.
• 객체(Object)와 달리 키(key)를 문자형으로 타입 변환 없이 그대로를 유지한다.
• NaN도 키(key)로 사용 가능하다.
• 값(value)의 삽입 순서를 기억한다. 객체(Object)는 프로퍼티 순서를 기억하지 못한다.
• 배열(Array)와 유사하게 내장 메서드 forEach도 지원한다.

<맵(map)의 주요 메서드와 프로퍼티>

new Map()           // 맵(Map)을 만든다.
map.set(key, value) // 키(key)를 이용해 값(value)를 저장
map.get(key)        // 키(key)에 해당하는 값을 반환한다. 키(key)가 존재하지 않으면 undefined를 반환
map.has(key)        // 키(key)가 존재하면 true, 존재하지 않으면 false를 반환
map.delete(key)     // 키(key)에 해당하는 값을 삭제
map.clear()         // 맵(Map) 안에 모든 요소를 제거
map.size            // 요소의 개수를 반환


// 아래의 예시를 보면서 알아보자

let testMap = new Map();

testMap.set("1", "string1"); // 문자형(String) 키(key)
testMap.set(1, "num1");      // 숫자형(Number) 키(key)
testMap.set(true, "bool");   // 불린형(boolean) 키(key)

console.log(testMap.get(1));    // "num1"
console.log(testMap.get("1"));  // "string1"
console.log(testMap.get(true)); // "bool"

console.log(testMap.has(1)); // true
console.log(testMap.has(2)); // false

console.log(testMap.size()); // 3

 

<맵(Map)은 객체(Object)를 키(key)로 허용>

let kim = { name : "kim" };

// kim의 식사 횟수를 세어보자
let mealCountMap = new Map();

// 객체인 kim 을 맵(Map)의 키(key)로 사용
mealCountMap.set(kim, 3);

console.log(mealCountMap.get(kim)); // 3

 

<맵(Map)은 체이닝이 가능하다>

• 맵(Map)은 set 을 호출 할 때 마다 맵(Map) 자신이 반환된다.
• 이를 이용하면 map.set을 체이닝(chaining)할 수 있다.

let map = new Map();

map.set("1", "string1").set(1, "num1").set(true, "bool1");

console.log(map.size); // 3
console.log(map);      // {'1' => 'string1', 1 => 'num1', true => 'bool1'}

 

<맵(Map) 요소에 반복 작업하기>

map.keys()    // 각 요소의 키(key)를 모은 반복 가능한 객체를 반환
map.values()  // 각 요소의 값을 모은 이터러블 객체를 반환
map.entries() // 요소의 [키, 값]을 한 쌍으로 하는 이터러블 객체 반환

let InfoMap = new Map([
	["name", "kim"],
	["gender", "M"]
]);

console.log(InfoMap);           // {'name' => 'kim', 'gender' => 'M'}
console.log(InfoMap.keys());    // {'name', 'gender'}
console.log(InfoMap.values());  // {'kim', 'M'}
console.log(InfoMap.entries()); // {'name' => 'kim', 'gender' => 'M'}

// keys()는 키(key)를 대상으로 순회한다.
for( let key of InfoMap.keys() ) {
	console.log(key); // name, gender
}

// values()는 값(value)를 대상으로 순회한다.
for( let value of InfoMap.values() ) {
	console.log(value); // kim, M
}

// [키(key), 값(value)] 쌍을 대상으로 순회
for( let entry of InfoMap ) { // InfoMap.entries()와 동일
	console.log(entry); // ['name', 'kim'], ['gender', 'M']
}

 

<객체(Obejct)를 맵(Map)으로 바꾸기>

• 평범한 객체(Obejct)를 맵(Map)으로 만들고 싶다면 내장 메서드 Obejct.entries()를 활용 하면 된다.
• Obejct.entries() 메서드는 객체(Object)의 키(key)-값(value) 쌍을 요소([key, value])로 가지는 배열을 반환 한다.

let testObj = {
	name   : "kim",
	gender : "m"
};

let testMap = new Map(Object.entries(testObj));

console.log(testMap.get("name")); // kim

 

<맵(Map)을 객체(Obejct)로 바꾸기>

• 맵(Map)을 객체(Obejct)로 만들고 싶다면 Object.fromEntries()를 활용 하면 된다.
• Object.fromEntries() 메서드는 각 요소가 [키(key), 값(value)] 쌍인 배열을 객체로 바꿔준다.

let testMap = new Map([
	["month", 12],
	["date", 31],
	["day", "Fir"]
]);

let testObj = Object.fromEntries(testMap);

console.log(testObj);       // {month: 12, date: 31, day: 'Fir'}
console.log(testObj.month); // 12