eatthefrog
모던 자바스크립트) map 특징 본문
실생활 예시: 학교 사물함
사물함에는 각각 고유한 번호(key)가 있고, 그 안에 학생들의 물건(value)이 들어있습니다. Map은 이러한 사물함 시스템과 비슷합니다.
// Map 생성
const locker = new Map();
// 사물함에 물건 넣기 (set)
locker.set('1번', '영희의 교과서');
locker.set('2번', '철수의 체육복');
// 사물함 확인하기 (get)
console.log(locker.get('1번')); // '영희의 교과서'
// 사물함에 물건이 있는지 확인 (has)
console.log(locker.has('3번')); // false
// 사물함 비우기 (delete)
locker.delete('2번');
// 전체 사물함 개수 확인 (size)
console.log(locker.size); // 1
주요 Map 메서드와 특징:
1. 생성: `new Map()`
2. 값 추가/수정: `set(key, value)`
3. 값 조회: `get(key)`
4. 존재 여부 확인: `has(key)`
5. 삭제: `delete(key)`
6. 전체 삭제: `clear()`
7. 크기 확인: `size`
8. 순회 메서드:
- `keys()`: 키 목록
- `values()`: 값 목록
- `entries()`: [키, 값] 쌍 목록
Array, Object와의 차이점:
1. Array와의 차이:
https://www.youtube.com/watch?v=cEnAEQnANt8&t=726s
// Array
const arr = ['사과', '바나나'];
console.log(arr[0]); // 인덱스로 접근
// Map
const fruits = new Map();
fruits.set('빨간과일', '사과');
fruits.set('노란과일', '바나나');
console.log(fruits.get('빨간과일')); // 키로 접근
2. Object와의 차이:
// Object
const obj = {
name: '철수',
age: 20
};
// Map
const person = new Map();
person.set('name', '철수');
person.set('age', 20);
주요 차이점:
1. 키의 타입
- Object: 문자열이나 심볼만 가능
- Map: 모든 타입(함수, 객체, 원시값 등) 가능
2. 크기 확인
- Object: `Object.keys(obj).length`로 확인
- Map: `size` 속성으로 바로 확인
3. 순회
- Object: `for...in` 또는 Object 메서드 사용
- Map: `for...of`와 내장 메서드로 쉽게 순회 가능
4. 순서 보장
- Object: 순서 보장되지 않음
- Map: 삽입 순서 보장
실제 활용 예시:
// 사용자 세션 관리
const userSessions = new Map();
// 세션 추가
userSessions.set('user123', {
loginTime: new Date(),
lastActive: new Date(),
permissions: ['read', 'write']
});
// 세션 확인
if (userSessions.has('user123')) {
const session = userSessions.get('user123');
console.log('마지막 활동:', session.lastActive);
}
// 만료된 세션 삭제
for (const [userId, session] of userSessions) {
if (isSessionExpired(session)) {
userSessions.delete(userId);
}
}
Map은 특히 키-값 쌍을 자주 추가/삭제하거나, 키의 타입이 다양하거나, 순서가 중요한 경우에 유용합니다.