JavaScript Maps
JavaScript Maps: Map 객체의 이해와 활용
JavaScript에서 Map 객체는 키와 값의 쌍으로 이루어진 데이터 구조입니다. **객체(Object)**와 비슷하게
키-값 형태로 데이터를 저장하지만, Map은 객체와 다르게 **모든 데이터 유형(문자열, 객체, 함수 등)**을 키로 사용할 수 있으며, 삽입 순서를
유지합니다. 또한, 데이터 크기를 확인하거나 반복을 쉽게 할 수 있는 다양한 메서드를 제공합니다.
이 가이드는 JavaScript에서 Map 객체의 사용법과 메서드를 설명하고, 그 활용 방법을 다룹니다.
1. Map 객체의 기본 개념
Map 객체는 키-값 쌍을 저장하고 관리하는 구조로, 모든 값(객체, 함수, 숫자 등)을 키로
사용할 수 있습니다. 이는 객체와 다른 점 중 하나입니다.
1.1. Map 객체 생성
Map은 기본 생성자 함수를 사용해 생성할 수 있습니다.
const map = new Map();
배열을 사용해 초기 값을 설정할 수도 있습니다. 배열은 [키, 값] 형태의 쌍으로 이루어진 배열이어야 합니다.
const map = new Map([
["name", "Alice"],
["age", 25],
["city", "Seoul"]
]);
console.log(map);
// 출력: Map(3) { 'name' => 'Alice', 'age' => 25, 'city' => 'Seoul' }
2. Map 객체의 주요 메서드
2.1. set(): 값 추가 또는 수정
set() 메서드는 Map 객체에 새로운 키-값 쌍을 추가하거나, 이미 존재하는 키의 값을
수정합니다.
const map = new Map();
map.set("name", "Alice");
map.set("age", 25);
console.log(map); // 출력: Map(2) { 'name' => 'Alice', 'age' => 25 }
// 이미 존재하는 키의 값 수정
map.set("age", 26);
console.log(map); // 출력: Map(2) { 'name' => 'Alice', 'age' => 26 }
2.2. get(): 값 조회
get() 메서드는 특정 키에 해당하는 값을 반환합니다. 키가 존재하지 않으면
**undefined**를 반환합니다.
console.log(map.get("name")); // 출력: Alice
console.log(map.get("age")); // 출력: 26
console.log(map.get("city")); // 출력: undefined (존재하지 않는 키)
2.3. has(): 키 존재 여부 확인
has() 메서드는 Map 객체에 특정 키가 존재하는지 여부를 확인하여 불리언
값을 반환합니다.
console.log(map.has("name")); // 출력: true
console.log(map.has("city")); // 출력: false
2.4. delete(): 키-값 삭제
delete() 메서드는 특정 키에 해당하는 키-값 쌍을 삭제합니다. 삭제 성공 시
true, 실패 시 **false**를 반환합니다.
map.delete("age");
console.log(map); // 출력: Map(1) { 'name' => 'Alice' }
2.5. clear(): 모든 키-값 삭제
clear() 메서드는 Map 객체의 모든 키-값 쌍을 삭제하여, 빈 Map으로
만듭니다.
map.clear();
console.log(map); // 출력: Map(0) {}
2.6. size: Map의 크기 확인
size 속성은 Map 객체에 저장된 키-값 쌍의 개수를 반환합니다.
const map = new Map([
["name", "Alice"],
["age", 25]
]);
console.log(map.size); // 출력: 2
3. Map의 반복과 순회
Map은 이터러블 객체이므로 for...of나 forEach()와 같은 반복문을 사용하여 각 요소를 순회할 수
있습니다.
3.1. for...of로 순회
for...of 반복문을 사용하여 Map의 [키, 값] 쌍을 순회할 수 있습니다.
const map = new Map([
["name", "Alice"],
["age", 25]
]);
for (const [key, value] of map) {
console.log(`${key}: ${value}`);
}
// 출력:
// name: Alice
// age: 25
3.2. forEach()로 순회
forEach() 메서드는 Map 객체의 각 요소에 대해 주어진 콜백 함수를 실행합니다.
map.forEach((value, key) => {
console.log(`${key}: ${value}`);
});
// 출력:
// name: Alice
// age: 25
4. Map과 배열 변환
Map은 배열과 상호 변환이 가능합니다. 배열을 Map으로 변환하거나, Map을 배열로
변환하는 것은 매우 간단합니다.
4.1. 배열을 Map으로 변환
배열을 Map으로 변환할 때는 [키, 값] 쌍으로 이루어진 배열이어야 합니다.
const array = [
["name", "Alice"],
["age", 25]
];
const map = new Map(array);
console.log(map); // 출력: Map(2) { 'name' => 'Alice', 'age' => 25 }
4.2. Map을 배열로 변환
Map 객체는 전개 연산자나 **Array.from()**을 사용해 배열로 변환할 수 있습니다.
const map = new Map([
["name", "Alice"],
["age", 25]
]);
// 전개 연산자로 배열 변환
const array = [...map];
console.log(array); // 출력: [ ['name', 'Alice'], ['age', 25] ]
// Array.from()으로 배열 변환
const array2 = Array.from(map);
console.log(array2); // 출력: [ ['name', 'Alice'], ['age', 25] ]
5. Map과 객체 비교
객체도 키-값 형태로 데이터를 저장할 수 있지만, Map과 몇 가지 차이점이 있습니다.
5.1. 객체와 Map의 차이점
- 키의 유형: 객체의 키는 문자열 또는 심볼만 가능하지만,
Map은 모든 데이터 유형을 키로 사용할 수 있습니다(문자열, 숫자, 객체, 함수 등). - 삽입 순서 유지:
Map은 삽입된 순서를 유지하며, 객체는 순서가 보장되지 않습니다(ES6 이후 대부분의 경우 객체도 삽입 순서를 유지하지만, 특정한 경우에 순서가 보장되지 않을 수 있습니다). - 크기 확인:
Map은size속성으로 크기를 쉽게 확인할 수 있지만, 객체는 크기를 확인하려면 별도의 계산이 필요합니다.
5.2. 객체와 Map 비교 예시
const obj = { name: "Alice", age: 25 };
const map = new Map([
["name", "Alice"],
["age", 25]
]);
console.log(obj.name); // 출력: Alice
console.log(map.get("name")); // 출력: Alice
// 객체의 크기 확인 (수동 계산)
console.log(Object.keys(obj).length); // 출력: 2
// Map의 크기 확인 (size 사용)
console.log(map.size); // 출력: 2
6. Map의 활용 예시
6.1. 키로 객체 사용
Map 객체에서는 객체를 키로 사용할 수 있습니다.
const user1 = { name: "Alice" };
const user2 = { name: "Bob" };
const userMap = new Map();
userMap.set(user1, 100); // 객체를 키로 사용
userMap.set(user2, 200);
console.log(userMap.get(user1)); // 출력: 100
console.log(userMap.get(user2)); // 출력: 200
6.2. 값의 빈도수 계산
Map을 사용해 배열에서 각 값의 빈도수를 계산하는 예시입니다.
const numbers = [1, 2, 2, 3, 3, 3, 4];
const frequencyMap
= new Map();
for (const number of numbers) {
frequencyMap.set(number, (frequencyMap.get(number) || 0) + 1);
}
console.log(frequencyMap);
// 출력: Map(4) { 1 => 1, 2 => 2, 3 => 3, 4 => 1 }
7. WeakMap 객체
- *
WeakMap*은Map과 비슷하지만, 키가 반드시 객체여야 하며 **약한 참조(garbage collection에 의해 해제 가능)**를 사용합니다.WeakMap은 메모리 누수를 방지하는데 유용합니다.
const weakMap = new WeakMap();
let obj = { name: "Alice" };
weakMap.set(obj, "data");
console.log(weakMap.get(obj)); // 출력: data
obj = null; // obj가 메모리에서 해제됨
요약
Map객체는 키-값 쌍을 저장하는 데이터 구조로, 모든 유형을 키로 사용할 수 있으며, 삽입 순서를 유지합니다.- 주요 메서드:
set(): 값을 추가하거나 수정get(): 값을 조회has(): 키 존재 여부 확인delete(),clear(): 키-값 삭제size:Map의 크기 확인
- 이터러블로서
for...of나forEach()로 반복할 수 있습니다. - 객체와의 차이점:
Map은 모든 데이터 유형을 키로 사용할 수 있으며, 크기를 쉽게 확인할 수 있습니다.
JavaScript의 Map 객체는 다양한 데이터 유형을 키로 사용하고, 삽입 순서를 유지하며 반복 작업을 유연하게 처리할 수 있는 강력한 도구입니다.