[JS] 코딩 기술 맵(map)편 - 소니아 개발 블로그

목표

js 데이터 컬랙션 맵(map)의 등장 배경을 이해한다.
js 데이터 컬랙션 맵(map)을 이해한다.

맵의 등장 배경

객체만 봐서는 어떤 의도를 가지고 만들었는지 명확하지 않다.

맵의 개념 요약

key - value 로 이루어진 컬렉션
key를 사용해 value를 get, set
key들은 중복 불가. 한개의 key에는 하나의 value만
key 로 사용할 수 있는 데이터형: string, symbol(ES6), object, function
- number는 불가능

맵의 구체적인 개념

맵은 값의 개수을 알수있는 프로퍼티가 존재하여 좀더 쉽고 명확하게 개수를 확인할수 있다.

let emoticon = { 
    "/와우/" : "wow.png",
    "/나우/" : "now.png",
    "/하트/" : "love.png"
}
// 객체 개수를 알아내기 
object.keys(emoticon).length;   // 3

let mapEmoticon = new Map()
    .set("/와우/", "wow.png")
    .set("/나우/", "now.png")
    .set("/하트/", "love.png")
// 객체 개수를 알아내기
mapEmoticon.size                // 3

객체는 순회하기 위해서 키를 알아낸후 순회해야하지만, 맵은 순회가능한 컬랙션이다.
맵에는 순회가능한 forEach 메서드가 제공되기에 간단하고 명확하게 값을 확인할 수 있다.

// 키-값 객체의 순환 
Object.keys(emoticon).forEach( ele => { console.log (ele)} )
Object.values(emoticon).forEach( ele => { console.log (ele)} )
// Map의 순환
mapEmoticon.forEach( (val, key) => { console.log(key, val)})

맵은 키-값의 추가와 제거에 맵은 좋은 성능을 보이는 반면, 객체는 키-값 쌍의 추가와 제거를 위한 최적화가 되어있지않아 좋은 성능을 기대하기는 어렵다.

javascript data collection - 객체
javascript data collection - 배열

References

자바스크립트 코딩의 기술
[JS #5] ES6 Map(), Set()