1. Map오브젝트 형태, new Map()


Map 오브젝트

<aside> 💡 [Key / Value] pair collection

</aside>

Map 오브젝트의 형태는 [key, value]형태로 대괄호 내에 key와 value를 작성합니다. 자바스크립트의 Map에서는 정말 다양형 타입을 key로 사용할 수 있는데 예제코드를 통해 알아봅니다.

cost obj = new Map([
	["key", "value"],
	[{book:200}, "오브젝트"],
	[100, "Number"],
	[Symbol(100), "symbol"]
]);
for(let keyValue of obj){
	console.log(keyValue);
};

[실행 결과]

["key", "value"] [{book:200}, "오브젝트"] [100, "Number"] [Symbol(100), "symbol"]

⇒ key의 타입으로 String, Object, Number, Symbol 이 사용됩니다 또한 Map의 key처리는 for-of문을 통해 작성한 순서대로 읽어서 처리할수도 있습니다.

new Map()

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/141e686b-7300-44f0-acf3-a2d7404d7fba/Untitled.png

new 키워드를 사용해 Map의 인스턴스를 생성할 수 있습니다. 파라미터에는 이터러블 오브젝트를 작성할 수 있는데 만약 생성시점에서 파라미터를 다 가지고있는게 아니라면 인스턴스 생성후 추가해주는 방향으로 사용할 수도 있습니다.

const obj = new Map([
	["spring", "boot"],
	["node", "js"]
]);
console.log(obj);
console.log(typeof obj);

[실행 결과]

Map(2) {"spring" => "boot", "node" => "js"}

object

⇒ 초기값으로 이터러블 오브젝트를 작성해주며 대괄호 두개를 통해 2차원 배열로 작성해줬습니다.

Map 오브젝트는 Same-Value-Zero 비교 알고리즘을 따르기 때문에 key값을 비교하여 key 값이 같을경우 value가 대체됩니다. 여기서 key 값을 비교할때는 타입까지 비교하기 때문에 키 값이 100과 "100"이라면 다르다고 판단합니다.

const obj = new Map([
	[100, "숫자 100"],
	["100", "문자 100"],
	[100, "숫자 100 대체"],
]);
for(let [key, value] of obj){
	console.log(`${key} : ${value}`);
};

[실행 결과]

100 : 숫자 100 대체 100 : 문자 100

  1. ["100", "문자 100"]

    ⇒ Map 내부에서 "100"이라는 key값을 찾지만 기존에 등록된 100은 타입이 다르기때문에 없는걸로 판단해서 다른 key값으로 등록됩니다.

  2. [100, "숫자 100 대체"]

    ⇒ Map 내부에서 100이라는 key값을 찾고 [100, "숫자 100"] 를 찾습니다. key의 값과 타입이 같기에 같은 key로 판단해 value를 대체합니다.

Same-Value-Zero비교 알고리즘