[JavaScript] ES6 Map()

Map()

• Map()은 Javascript ES6의 key-value 쌍의 컬렉션이다.
• key는 중복될 수 없다.
• key를 이용해 값을 찾거나(get), 설정(set)할 수 있다.
• key로 사용할 수 있는 데이터 형은 string, symbol, object, function이며 number는 사용할 수 없다.
• 엔트리 조회와 추가 - map.get(), map.set()

const menu = new Map()
menu.set('001', {code: "001", name: "콜라"})
menu.set('002', {code: "002", name: "환타"})
console.log(menu.get('001'))	// {code: '001', name: '콜라'}

//
const lastName = new Map(
    [
    	["ㄱ", "김씨"],
        ["ㄴ", "남씨"],
        ["ㄷ", "동씨"]
    ]
)
console.log(lastName.get("ㄱ"))	// 김씨

//
const month = new Map().set("01", "January").set("02", "February")
console.log(month.get("02"))	// February

 

• map.has(), map.size, map.delete(), map.clear()

console.log(lastName.has("ㄱ"))		// true

console.log(manu.size)			// 2

lastName.delete("ㄱ")
console.log(lastName.has("ㄱ"))		// false

menu.clear()
console.log(you.size)			// 0

 

Object와 Map의 비교

• Object의 키는 String, Symbol이며, Map의 키는 모든 값을 가질 수 있다.
• Object는 크기를 수동으로 추적해야 하지만, Map은 크기를 쉽게 얻을 수 있다.
• Map은 사입된 순서대로 반복된다.
• Object에는 prototype이 있어 Map에 기본 키들이 있다.(map = Object.create(null)을 사용하여 우회 가능)

Object와 Map 중 어느 것을 사용하는 것이 좋을까?

• 실행 시까지 키를 알 수 없고, 모든 key가 동일한 type이며 모든 value들이 동일한 type일 경우에는 Object 대신에 Map을 권장.
• 각 개별 요소에 대해 적용해야 하는 로직이 있을 경우에는 Object를 사용하는 것을 권장.

 

Map의 iterable object

• map 내의 key 혹은 value들을 순회할 수 있는 iterable object를 반환한다.
• map.keys(), map.values()

const menu = new Map()
menu.set('001', {code: "001", name: "콜라"})
menu.set('002', {code: "002", name: "환타"})
menu.set('003', {code: "003", name: "사이다"})

console.log([...menu.keys()])		// ["001", "002", "003"]
console.log([...menu.values()])		// [{code: "001", name: "콜라"}, {code: "002", name: "환타"}, {code: "003", name: "사이다"}]

 

• map 내의 모든 엔트리를 순회할 수 있는 iterable object를 반환한다.
• map.entries(), map.next()

const menu = new Map()
menu.set('001', {code: "001", name: "콜라"})
menu.set('002', {code: "002", name: "환타"})
menu.set('003', {code: "003", name: "사이다"})

const iterableMenu = menu.entries()
console.log(iterableMenu.next())	// {value: ['001', {code: "001", name: "콜라"}], done: false}
console.log(iterableMenu.next())	// {value: ['002', {code: "002", name: "환타"}], done: false}
console.log(iterableMenu.next())	// {value: ['003', {code: "003", name: "사이다"}], done: true}

 

• map 순회
• for-of, forEach
• forEach()의 인자는 value, key, map 순서임

for (let [key, value] of menu) {
	...
}

menu.forEach((value, key, map) => {
	...
})