[javascript] Map 객체를 사용해보자

Map

 

자바스크립트 자료구조 중 map에 대해 포스팅 해보겠습니다.

ES6에 도입된 Map은 Object객체와 동일하게 key-value 쌍으로 저장되며 삽입 순서도 기억하는 컬렉션 입니다.

 

• key-value의 형태로 이루어져있으며 삽입 순서를 기억
• key는 모든 값 (함수, 객체 등)을 사용 가능
• get, set 을 이용하여 키 값을 반환, 설정

 

 

기본 구문

const myMap = new Map([
  ['a', 1],
  ['b', 2]
]);

myMap.set('c', 3);

Object.fromEntries(myMap);
// {a: 1, b: 2, c: 3}

new 생성자를 통해서만 생성이 가능합니다.

 

key값으로 String과 Symbol 타입만 가질 수 있는 Object형과 달리,

어떠한 값이라도 key, 또는 value로 사용이 가능하다는 차이가 있네요.

(함수도 가능,,객체도 가능합니다!)

 

 

---

 

 

Map 객체를 사용해보자

const myMap = new Map()

const keyString = 'a string'
const keyObj    = {}
const keyFunc   = function() {}

// setting the values
myMap.set(keyString, "value associated with 'a string'")
myMap.set(keyObj, 'value associated with keyObj')
myMap.set(keyFunc, 'value associated with keyFunc')

myMap.size              // 3

// getting the values
myMap.get(keyString)    // "value associated with 'a string'"
myMap.get(keyObj)       // "value associated with keyObj"
myMap.get(keyFunc)      // "value associated with keyFunc"

myMap.get('a string')    // "value associated with 'a string'"
                         // because keyString === 'a string'
myMap.get({})            // undefined, because keyObj !== {}
myMap.get(function() {}) // undefined, because keyFunc !== function () {}

 

 

💡 Map 반복문

const myMap = new Map()
myMap.set(0, 'zero')
myMap.set(1, 'one')

for (const [key, value] of myMap) {
  console.log(key + ' = ' + value)
}
// 0 = zero
// 1 = one

for (const key of myMap.keys()) {
  console.log(key)
}
// 0
// 1

for (const value of myMap.values()) {
  console.log(value)
}
// zero
// one

for (const [key, value] of myMap.entries()) {
  console.log(key + ' = ' + value)
}
// 0 = zero
// 1 = one

myMap.forEach(function(value, key) {
  console.log(key + ' = ' + value)
})
// 0 = zero
// 1 = one

 

 

💡 has(key) : Map에서 key 존재 여부 확인

const myMap = new Map()
myMap.set(0, 'zero')
myMap.set(1, 'one')

myMap.has(0);	// true
myMap.has(2);	// false

 

 

💡 delete(key) : Map에서 key에 해당하는 값 삭제

const myMap = new Map()
myMap.set(0, 'zero')
myMap.set(1, 'one')

myMap.delete(0);	// true
myMap.delete(2);	// false

console.log(myMap); 
// {1 => "one"}

 

 

💡 clear() : Map 안의 모든 요소 삭제

const myMap = new Map()
myMap.set(0, 'zero')
myMap.set(1, 'one')

myMap.clear();
// {size: 0}

 

 

 

 

참고 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

Map - JavaScript | MDN