[Javascript] Map 사용법

자바스크립트에서 map은 두 가지이다.

1. Array.prototype.map() : 특정 배열 내 모든 요소에 대해 각각 함수를 적용하고, 이 결과를 모아 새로운 배열 반환
2. Map: Java의 HashMap, Python의 dictionary와 같은 {key:value}로 이루어진 자료구조

이번 게시글에서는 2번 Map에 대하여 다룬다.

 

---

1. Map이란?

Map 객체는 키-값 쌍을 저장하며 각 쌍의 삽입 순서도 기억하는 콜렉션입니다. 아무 값(객체와 원시 값)이라도 키와 값으로 사용할 수 있습니다.
- MDN Web Docs -

맵은 쉽게 말해서 Java의 HashMap, Python의 Dictionary와 같은 자료구조이다.

key: value의 형식으로 저장되며, key값을 사용하여 해당 key에 맞는 value값을 가져올 수 있다.

 

map은 키-값 쌍의 자료구조이기 때문에 얼핏 보면 map과 object가 동일한 것처럼 보일 수 있는데, 엄연히 둘은 다르다.

출처: MDN(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map)

 

2. Map.*

1) Map.length: 값이 0인 속성.

2) Map.size: 맵의 키-값 쌍 갯수

3) Map.clear(): 맵 초기화

4) Map.entries(): 맵의 모든 키-값 쌍을 [key, value] 형태의 array로 만들어서 반환

5) Map.forEach(): 맵의 모든 키-값 쌍에 대해서 콜백함수 사용

6) Map.get(key): key값에 맞는 value값 반환

7) Map.delete(key): key-value 쌍 삭제

8) Map.has(key): 해당 key가 Map에 포함되어 있는지 확인

9) Map.keys(): 맵의 모든 key들을 반환

10) Map.set(key, value): 맵에 key-value 쌍을 집어넣음

 

 

3. 예시 코드

let myMap = new Map()

let keyString = '문자열'
let keyObj    = {}
let keyFunc   = function() {}

// 값 설정
myMap.set(keyString, "'문자열'과 관련된 값")
myMap.set(keyObj, 'keyObj와 관련된 값')
myMap.set(keyFunc, 'keyFunc와 관련된 값')

myMap.size              // 3

// getting the values
myMap.get(keyString)    // "'문자열'과 관련된 값"
myMap.get(keyObj)       // "keyObj와 관련된 값"
myMap.get(keyFunc)      // "keyFunc와 관련된 값"

myMap.get('문자열')    // "'문자열'과 관련된 값"
                         // keyString === '문자열'이기 때문
myMap.get({})            // undefined, keyObj !== {}
myMap.get(function() {}) // undefined, keyFunc !== function () {}

// 출처: MDN(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map)