왜 해시맵인가요?

우리는 다른 프로그래밍 언어에 해시테이블이라는 것이 있다는 것을 알고 있습니다. 해시테이블은 키-값 쌍을 저장하는 데이터 구조로, O(1)의 상수 시간 조회 기능을 제공하여 매우 유용합니다. 데이터를 저장하는 데 사용할 수 있는 유리한 데이터 구조입니다. 자바스크립트에서는 해시테이블과 같은 내장 데이터 구조가 없습니다. 하지만 객체를 사용하여 키-값 쌍을 저장할 수 있습니다. 자바스크립트에서 이를 Map이라고 합니다.

Map이란 무엇일까요?

Map은 각 요소가 키-값 쌍으로 저장되는 요소들의 집합입니다. Map의 키와 값은 객체와 기본 값 모두 가능합니다. Map 객체는 삽입 순서대로 요소를 반복합니다. for...of 루프는 각 반복마다 [키, 값]의 배열을 반환합니다.

Map은 키가 어떤 데이터형이든 키-값 쌍을 보관합니다. Map은 Map의 크기를 나타내는 속성을 가지고 있습니다. Map은 키의 원래 삽입 순서를 기억합니다.

Map 메서드와 속성

메서드	설명
new Map()	새로운 Map 객체를 생성합니다.
set()	Map의 키에 대한 값을 설정합니다.
get()	키에 대한 값을 반환합니다.
has()	Map에 키가 존재하는지 여부를 나타내는 불리언 값을 반환합니다.
delete()	Map에서 키를 제거합니다.
clear()	Map에서 모든 키를 제거합니다.
values()	Map의 값들을 포함하는 반복자 객체를 반환합니다.
keys()	Map의 키들을 포함하는 반복자 객체를 반환합니다.
entries()	Map의 키-값 쌍들을 포함하는 반복자 객체를 반환합니다.
forEach()	Map의 각 키-값 쌍에 대해 제공된 함수를 한 번씩 실행합니다.

속성	설명
size	Map의 키/값 쌍의 개수를 반환합니다.

Map 예시

const map = new Map()
map.set('name', 'John')
map.set('age', 30)
map.set('isMarried', true)
map.set('address', { city: 'New York', state: 'NY' })
map.set('hobbies', ['reading', 'writing', 'coding'])

console.log(map.get('name')) // John
console.log(map.get('age')) // 30
console.log(map.get('isMarried')) // true
console.log(map.get('address')) // {city: 'New York', state: 'NY'}
console.log(map.get('hobbies')) // ['reading', 'writing', 'coding']

console.log(map.size) // 5

Map 반복

const map = new Map()
map.set('name', 'John')
map.set('age', 30)
map.set('isMarried', true)
map.set('address', { city: 'New York', state: 'NY' })
map.set('hobbies', ['reading', 'writing', 'coding'])

// 키 반복
for (const key of map.keys()) {
  console.log(key)
}

// 값 반복
for (const value of map.values()) {
  console.log(value)
}

// 키-값 쌍 반복
for (const [key, value] of map.entries()) {
  console.log(key, value)
}

// 키-값 쌍 반복
map.forEach((value, key) => {
  console.log(key, value)
})

Map vs. 객체

Map	객체
Map은 객체와 마찬가지로 키가 있는 데이터 항목의 집합입니다. 하지만 주요 차이점은 Map이 어떤 유형의 키도 허용한다는 것입니다.	객체 키는 문자열 또는 심볼이어야 합니다.
Map은 반복 가능하며 쉽게 루프를 돌릴 수 있습니다.	객체는 반복 가능하지 않으며 쉽게 루프를 돌릴 수 없습니다.
Map은 내장 forEach 메서드를 가지고 있어 배열로 변환할 필요가 없습니다.	객체는 내장 forEach 메서드를 가지고 있지 않습니다.
Map은 size 속성을 가지고 있으므로 항목 수를 쉽게 가져올 수 있습니다.	객체는 size 속성을 가지고 있지 않습니다.
Map은 객체를 키로 사용할 수 있습니다.	객체는 객체를 키로 사용할 수 없습니다.
Map은 일반적으로 객체보다 빠릅니다.	객체는 일반적으로 Map보다 느립니다.

결론

이 글에서는 자바스크립트의 Map에 대해 알아봤습니다. Map의 메서드와 속성에 대해 배우고, Map과 객체의 차이점도 알게 되었습니다. 이 글이 도움이 되셨기를 바랍니다. 질문이 있으시면 아래에 댓글을 남겨주세요. 읽어주셔서 감사합니다.

원래 게시 위치: https://blog.imam.dev/blog/javascript-hashmap

참고 자료

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

https://www.freecodecamp.org/news/what-is-a-javascript-map-what-are-the-differences-between-map-and-object-in-javascript/

https://www.geeksforgeeks.org/map-vs-object-javascript/