[JavaScript] Map 객체 / new Map 생성자

Map객체 

Map 객체는 '키'와 '값'으로 이루어진 컬렉션으로 자바스크립트의 기본 객체인 Object와 달리

키가 반드시 문자열이 아니어도 되며, 다양한 데이터 타입을 키와 값으로 활용할 수 있다.

 

Map객체 생성

// 빈 Map 객체 생성하기
const map = new Map();

// 이터러블 객체를 전달하여 Map 객체 생성하기
const arr = [['name', 'John'], ['age', 30]];
const map2 = new Map(arr);

 

Map객체의 기본 동작

 

set(key, value) : 키-값 쌍을 추가한다. 기존에 동일한 키가 존재하면 값 대체.

const map = new Map();
map.set('name', 'John'); // 요소 추가
map.set('name', 'Jane'); // 요소 갱신
map.set('age', 30); // 새로운 요소 추가

get(key) : 키에 해당하는 값을 반환. 키가 존재하지 않으면 undefined 반환.

const map = new Map();
map.set('name', 'John');
map.set('age', 30);
console.log(map.get('name')); // 'John'
console.log(map.get('age')); // 30

has(key) : Map객체가 해당 키를 갖고 있는 지 확인. 존재하면 true 아니면 false 반환.

const map = new Map();
map.set('name', 'John');
console.log(map.has('name')); // true
console.log(map.has('age')); // false

delete(key) : 주어진 키와 값을 삭제. 삭제에 성공하면 true, 실패하면 false 반환.

const map = new Map();
map.set('name', 'John');
map.set('age', 30);
map.delete('name'); // 요소 삭제
map.delete('gender'); // 해당 키가 없으면 실패하고 false 반환

clear() : Map객체의 모든 요소를 제거.

const map = new Map();
map.set('name', 'John');
map.set('age', 30);
map.clear(); // 모든 요소 제거

 

size() : Map객체의 요소 크기 반환.

const map = new Map();
map.set('name', 'John');
map.set('age', 30);
console.log(map.size); // 2

 

 

Map객체의 이터레이션

이터레이션(iteration)이란?

컬렉션의 요소를 반복할 수 있는 기능.

 

Map객체는 기본적으로 for...of 구문을 사용하며 for...of 구문은 Map객체 내의 키-값 쌍을 반환한다.

const map = new Map();
map.set('name', 'John');
map.set('age', 30);
map.set('gender', 'male');

for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}
// 출력:
// "name: John"
// "age: 30"
// "gender: male"

 

Map 객체는 keys(), values(), entries() 메서드를 통해 이터레이터(iterator)를 반환할 수 있다.

 

keys() : Map 객체 내 모든 키(key)를 반환.

values() : Map 객체 내 모든 값(value)을 반환.

entries() : Map 객체 내 모든 키-값 쌍(key-value pair)을 각각 순회.

 

const map = new Map();
map.set('name', 'John');
map.set('age', 30);
map.set('gender', 'male');

// 모든 키 출력
for (const key of map.keys()) {
  console.log(key);
}
// 출력:
// "name"
// "age"
// "gender"

// 모든 값 출력
for (const value of map.values()) {
  console.log(value);
}
// 출력:
// "John"
// 30
// "male"

// 모든 키-값 쌍 출력
for (const [key, value] of map.entries()) {
  console.log(`${key}: ${value}`);
}
// 출력:
// "name: John"
// "age: 30"
// "gender: male"

 

Map 객체는 객체와 달리 객체(Object)를 키로 사용할 수 있는데

이는 객체의 참조값이 유일하기 때문이며 아래와 같은 코드도 작성 가능하다.

const myMap = new Map();
const obj = {};
myMap.set(obj, "Hello, World!");
console.log(myMap.get(obj)); // 출력: "Hello, World!"