[Javascript] Map 에 대하여

Young-mason·2021년 3월 16일
3

JavaScript

목록 보기
2/2

Map

Map은 키-값을 저장할 수 있는 자료구조입니다.
기존의 키-값을 저장할 수 있는 객체 (Object)가 있는데 Map은 또 왜 있는 걸까요? ES6이후에 등장한 Map에 대해서 알아보겠습니다.

1. Map은 key에 다양한 자료형을 허용합니다

자바스크립트 객체는 모든 키를 문자열로 변환합니다. 반면에, Map은 자료형에 대한 제한이 없습니다.
그래서 키로 객체가 허용된다는 점이 재밌습니다 🙂

let map = new Map();

// set 메소드의 첫번째 인자로 key,두 번째 인자로 value를 전달하여 Map의 요소를 생성할 수 있습니다
// 자기 자신을 반환하므로 체이닝(chaning ) 가능합니다
map
  .set('1', 'str1')
  .set(1, "num1");

// get 메소드의 key 를 입력하여 value에 접근할 수 있습니다
map.get(1) ;  // "num1"
map.get('1') ; // "str1"

// 객체도 key가 될 수 있습니다
let user = {
  'name' : 'Mason'
}

map.set(user, 29);
map.get(user) // 29;

2. Map은 size 프로퍼티 등 유용한 메서드나 프로퍼티가 있습니다

기존 Object의 크기를 알아내기 위해선 Object.keys(obj) 로 모든 key 배열을 만든 뒤 length에 접근해야 하는 번거로움이 있습니다.

하지만, Map에는 size라는 프로퍼티가 Map의 요소 수를 기억하고 있기 때문에, map.size 를 바로 호출하여 한번에 Map의 크기를 알아낼 수 있습니다

이 밖에 메소드들을 아래에 정리하였습니다.

[ Map의 메소드 ]

  • new Map() : 맵 생성
  • map.set(key, value) : key와 value 저장
  • map.get(key) : key에 해당하는 값 반환 (없을 경우 undefined)
  • map.has(key) : key의 존재여부 boolean으로 반환
  • map.delete(key) : key와 해당하는 값 삭제
  • map.clear() : 맵 안의 모든 요소 제거
  • map.size : 요소의 개수 반환

3. Map 은 순회 가능 (iterable) 합니다

기존 Object는 iterable 하지 않기 때문에 순회 하기 위해서 먼저 모든 key의 배열을 얻어낸 후 그 key의 배열을 순회하게 됩니다.
(Symbol.iterator 를 이용하여 iterable 객체로 만들어주는 방법도 있긴 합니다)

반면, Map은 삽입된 순서를 기억하며 메소드를 이용하여 삽입된 순서대로 순회 가능합니다. ( 객체는 프로퍼티 순서를 기억 못해요 )

[ Map 순회 메소드 ]

  • map.keys() – 각 요소의 키가 담긴 iterable 객체 반환
  • map.values() – 각 요소의 값이 담긴 iterable 객체를 반환
  • map.entries() – 요소의 [키, 값]을 한 쌍으로 하는 iterable 객체를 반환
// new Map 안에 키, 값을 요소로 가지는 배열을 인자로 전달하여 초기값을 넣어줄 수 있습니다

let meals = new Map([
  ['breakfast', 'bread'],
  ['lunch', '짜장면'],
  ['dinner', null]  // 아직안먹었어요ㅋㅋ
])

for (let meal of meals.keys()) {
  console.log(meal) 
}
//  breakfast, lunch, dinner


// forEach 메소드도 사용 가능합니다
meals.forEach((val, key, map) => {
 console.log(`${val}: ${key}`);
})
// breakfast: bread ... 


Mozilla Mdn 문서에 나와있는 Map과 Object와의 차이점을 정리하였습니다

ㅇ

결론

키에 다양한 자료형이 필요한 경우,
size에 자주 접근해야 하는 경우,
key-value의 추가와 제거, 순회가 빈번하게 발생하는 경우
Map을 사용하면 좋을 것 같네요 : )

참고자료

profile
Frontend Developer

0개의 댓글