자바스크립트에서 Map은 key-value 쌍으로 데이터를 저장하는 자료구조로 객체와 비슷하지만 차이점이 있다.
Map의 특징, 사용법과 객체와의 차이점을 정리해보았다.
Map이란?
- 모든 키 타입 허용
- 객체는 문자열과 Symbol만 키로 사용할 수 있지만 Map은 숫자, 객체, 함수 등 모든 데이터 타입을 키로 사용할 수 있다.
- 키 순서 유지
- 키가 추가된 순서를 유지하며 저장되기 때문에 따로 정렬할 필요가 없다.
- 중복 키 방지
- 동일한 키를 추가하면 기존 값이 덮어써진다. Map에서 key는 단 하나만 존재한다.
Map 사용법
1. Map 생성
Map() 생성자를 사용해서 만들 수 있으며 Map()은 오직 new로만 생성할 수 있다.
const newMap = new Map();2. 값 추가
set(key, value) 메소드를 사용하여 값을 추가할 수 있다.
newMap.set("키", "값");
newMap.set("one", 1);
newMap.set(2, "two");3. 값 검색
값을 검색하기 위해선 get(key) 메소드를 사용한다. 해당 키를 찾을 수 없는 경우 undefined가 반환된다.
newMap.get("키") // "값"
newMap.get("hello") // undefined4. 삭제
delete(key) 메소드를 사용하여 특정 요소를 삭제할 수 있다. true가 반환될 경우 성공적으로 삭제된 것이고 false가 반환될 경우 해당 요소가 존재하지 않는다는 것이다.
newMap.delete("키") // true
newMap.delete("apple") // false - 해당 키가 존재하지 않음5. 키 존재 여부 확인
또한, has() 메소드를 통해 해당 키를 가진 요소가 Map 안에 존재하는지 확인할 수 있다.
newMap.has("one") // true
newMap.has("banana") // false6. 요소 수 확인
size 메소드를 통해 Map의 요소 수를 반환할 수 있다. (length와 비슷한 역할)
console.log(newMap.size) // 출력: 2 / "one" : 1, 2 : "two순회하는 방법
마지막으로 for .. of 반복문을 통해 Map 객체를 순환할 수 있다.
keys()는 key를 반복하고values()는 value를 반복하며,entries()를 이용하면 [key, value] 쌍을 반복할 수 있다.
const myMap = new Map();
myMap.set(1, "apple");
myMap.set(2, "banana");
myMap.set(3, "kiwi");
for (const key of myMap.keys()) {
console.log(key); // "apple", "banana", "cherry"
}
for (const value of myMap.values()) {
console.log(value); // 1, 2, 3
}
for (const entry of myMap.entries()) {
console.log(`${entry[0]}: ${entry[1]}`);
// "apple: 1", "banana: 2", "cherry: 3"
}Map vs 객체
| Map | 객체 | |
|---|---|---|
| key 유형 | 모든 값 | string과 Symbol만 가능 |
| key 순서 | 삽입한 순서대로 | 항상 정렬된 것은 X |
| 성능 | 키-값의 추가&제거에 유용 | 추가&제거에 최적화X |
| 순회 | 직접 반복 가능 | 직접 반복 불가(for .. in 필요) |
여기서, 직접 반복 가능과 불가에 대해 의문점이 생겨서 더 찾아보았다.
Map은 iterable하기 때문에 추가 작업 없이 바로 for .. of에서 반복할 수 있다.
for (const [key, value] of myMap) {
console.log(`${key}: ${value}`);
}그러나, 객체의 경우 iterable하지 않기 때문에 키나 값을 배열로 변환한 후 반복할 수 있다.
// TypeError 발생
for (const item of obj) {
console.log(item);
}
// Object.keys()를 사용해 반복
for (const key of Object.keys(obj)) {
console.log(key);
}iterable은 자바스크립트에서 반복 가능한 객체를 의미한다.
for .. of반복문이 적용 가능하며 배열, 문자열, Map과 Set 등이 있다.
느낀점
Map은 객체의 단점을 보완하며 키의 순서가 중요하거나 문자열이 아닌 키가 필요할 때 유용하게 쓰일 수 있다. 반복 메소드와 유연한 키 타입 덕분에 데이터 관리가 훨씬 수월해지고 대량의 데이터를 처리할 때 유리하다. 하지만, 단순히 적은 양의 데이터를 저장하거나 직관적인 구조가 필요한 경우에는 객체가 더 적합하다. Map과 객체의 장단점을 잘 비교해 상황에 맞게 활용하는 것이 중요하다.
