[ES6]key-value로 구성된 Map 객체

Map이란?

map은 key-value를 한쌍으로 가지는 객체입니다. 이때 key값은 고유해야 하며 값은 변경이 가능합니다.

 

Map 시작하기

const db = new Map();

 

Map 생성은 아주 간단합니다. new Map()을 통해 새로운 객체를 생성하면 되는데요.

생성을 했으니 Map에 데이터를 넣어봅시다.

 

Map 데이터 삽입

// db.set(키, 벨류)
db.set('lang','javascript')
// value값이 객체일때
db.set('lang',{a : 'javascript', b : 'node'})
// key값이 객체일때
db.set({key : a}, {lang : 'javascript'})
// 여러개를 삽입할때 - 체이닝
db.set('name':'kim').set('age':20).set('phone':01012345678)

데이터 삽입은 Map의 set 함수를 사용합니다. 

value값으로 문자열이나 다른 값들도 넣을수 있지만 객체도 받을 수도 있다는 것 알아두시면 좋습니다.

이때 set을 통해 여러개의 key와 value값을 넣으면 순차적으로 데이터가 들어가게 됩니다.

(단, 같은 key값을 넣을 경우에는 value값이 덮어쓰기 된다)

 

Map 데이터 값 받기

db.get('lang') // javascript

Map 함수 중에 get 함수를 사용하는데요 get함수에 매개변수로 key값을 입력하면 value값을 받아올 수 있습니다.

 

Map을 활용하여 서버에서 데이터 값을 넘기기(예제)
localhost:8080/1 → 화면에 notebook 출력
localhost:8080/2 → 화면에 cup 출력
localhost:8080/3 → 화면에 chair 출력

const express = require("express");
const app = express();

const db = new Map();
db.set(1, "notebook");
db.set(2, "cup");
db.set(3, "chair");

app.get("/:data", (요청, 응답) => {
  const { data } = 요청.params;
  응답.json({
    data: db.get(parseInt(data))
  });
});

app.listen(8080);​

작성을 하고 run을 하면 화면에 출력이 잘 나올까요? 아마 데이터가 안 뜰 것입니다. 왜냐하면 params는 문자열로 받아오기 때문에 Map에 key값이 존재하지 않기 때문입니다. 그러면 어떻게 작성을 해야 화면에 출력을 할 수 있을까요?

app.get('/:data',(요청, 응답)=>{
    const {data} = 요청.params;
    응답.json({
    	data : db.get(parseInt(data))
    })
})
// 혹은
app.get('/:data',(요청, 응답)=>{
    let {data} = 요청.params;
    data = parseInt(data)
    응답.json({
    	data : db.get(data)
    })
})

위처럼 parseInt로 데이터 타입을 변경을 해야지 데이터 값을 불러올 수 있습니다. 그렇다면 map에 없는 key와 value를 요청하면 어떻게 될까요? 바로 undefined가 뜨게 됩니다.

 

Map이 가지고 있는 속성과 메서드

const db = new Map(); db.set(1, 'news').set(2, 'blog').set('name', 'dung').set(3, 'bag')
속성과 메서드	설명	결과
db.size	객체의 key, value 한쌍의 숫자를 반환	4
db.set('age',20)	Map에 key와 value값을 순서대로 삽입	Map(5) {   1 => 'news',   2 => 'blog',   'name' => 'dung',   3 => 'bag',   'age' => 20 }
db.get(2)	Map에서 key에 해당하는 값을 반환	blog
db.delete(name)	Map에서 key에 해당하는 요소 제거	Map(4) {   1 => 'news',   2 => 'blog',   3 => 'bag',   'age' => 20 }
db.clear()	Map의 모든 key-value 값을 제거	Map(0) {}
db.has('name')	Map에서 key에 해당하는 값이 존재하는지 boolean값으로 반환	false
db.keys()	Map에 삽입된 순서에 따라 요소의 키를 포함하는 반복자를 반환	[Map Iterator] { 1, 2, 3, 'age' }
db.values()	Map에 삽입된 순서에 따라 요소의 value 값을 포함 하는 반복자를 반환	[Map Iterator] { 'news', 'blog', 'bag', 20 }
const dbIterator = db[symbole.iterator]() const dbIterator = db.entries();	Map 객체의 반복기능 프로토콜을 구현하여 for...of와 같은 반복이 필요한 대부분의 구문에서 사용할수 있게 함	[Map Entries] {   [ 1, 'news' ],   [ 2, 'blog' ],   [ 3, 'bag' ],   [ 'age', 20 ] }
db.forEach((value, key) => {     console.log(key + value); });	Map 객체 삽입 순서에 따라 각각의 key-value 쌍마다 콜백함수를 실행	1news 2blog 3bag age20

 

Map과 Object

Map도 객체고 Object도 객체인데 무슨 차이가 있는 걸까요? 

1. Map은 key 값이 string이나 symbol이 아니어도 가능합니다.
   • Object는 key값으로 무조건 string이나 symbol만 받아온다는 뜻입니다. 즉, Map은 key값의 데이터 타입이 다양하니 조금 더 다양하게 활용할 수 있게 되겠죠?
2. Map은 for... of, Object는 for...in으로 반복합니다.
   • Map은 symbol.iterator가 명확하게 구분되어 for... of구문을 사용할 수 있어 이터러블하지만 Object는 symbol.iterator가 구현되어 있지 않아 for...of 구문을 사용할 수 없어 이터러블 하지 않는다. 때문에  for...in을 사용하지만 상속받은 열거 가능한 속성도 순환에 포함시키기 때문에 혼란을 야기시킵니다.
3. Map은 size() 함수로 명확한 프로퍼티 사이즈를 구할 수 있습니다.
   • Object에서도 length가 있는데요?라고 할 수 있지만 length는 명확히 프로퍼티의 사이즈를 구하는 개념이 아닐뿐더러 프로퍼티의 사이즈를 구한다는 개념자체가 애매하다.
4. Map은 모든 속성을 한 번에 제거할 수 있습니다.
   • Map.propertype.delete()를 통해 하나씩 제거하거나, Map.propertype.clear()를 통해 모든 속성을 제거할 수 있지만, Object 경우에는 delete operator를 통해서 일일이 제거해야 하며 한 번에 제거하는 메서드는 존재하지 않습니다.
5. Map의 경우 존재를 확인하기 쉽다.
   • Map은 has라는 함수를 활용하여 존재여부를 명확히 할 수 있지만. Object의 경우에는 { has : undefined }라는 객체가 존재한다면 has의 값이 undefined라는 건지 아니면 undefined 타입인 건지 알 수가 없어 존재여부 확인이 힘듭니다.
6. 성능
   • 성능적인 부분에서도 Map이 훨씬 우수한데요. 메모리나 연산속도가 모두 Map 우수하긴 하지만 Object가 더 잘하는 부분도 있습니다. 바로 정수를 키로 하는 Object는 속성 수가 적을 경우에 Map보다 더 빠르게 처리할 수 있습니다.