[Javascript] Map 객체

자바스크립트에서 Map 객체는 키와 값의 쌍을 저장하는 데이터 구조이다. Map은 키와 값을 연결하여 데이터를 보관하고, 각각의 키는 유일해야 한다. 얼핏보면 그냥 객체와 비슷해보이지만 Map과는 차이점이 존재한다.

---

Map 객체 장점

1. 유연한 자료형 사용 

Map 객체는 다양한 타입의 키를 허용한다. 문자열, 숫자, 객체 등 어떤 타입이든 키로 사용할 수 있다.

 

한편 일반 객체는 키는 문자열 또는 심볼(symbol)형태여야 한다.

 

일반 객체는 문자열, 객체, 심볼 등을 키로 사용해 출력하는데 문제가 없지만, 숫자 키 값을 사용해 출력하면 숫자키가 자동으로 숫자 문자열로 변환된다. 

 

2. 순서 보장

Map 객체는 데이터가 추가된 순서대로 요소의 순서를 보장한다. 즉, 요소를 추가한 순서대로 반복문이나 순회 함수를 통해 접근할 수 있다. 일반 객체는 요소들의 순서를 보장하지 않는다.

const map = new Map();

map.set("a", 1);
map.set("b", 2);
map.set("c", 3);

// 반복문을 통한 순회
for (const [key, value] of map) {
	console.log(key, value);
}
// 출력
// a 1
// b 2
// c 3

// 순회 메서드를 통한 순회
map.forEach((value, key) => {
	console.log(key, value);
});
// 출력
// a 1
// b 2
// c 3

 

3. 빠른 검색 및 삭제

Map 객체는 내부적으로 효율적인 검색 알고리즘을 사용하여 요소를 검색하고 삭제할 수 있다. 이 기능은 대규모 데이터를 다룰 때 효율적인 성능을 제공한다.

const map = new Map();

map.set("a", 1);
map.set("b", 2);
map.set("c", 3);

console.log(map.has("a")); // 출력: true
console.log(map.get("b")); // 출력: 2

map.delete("c");
console.log(map.size); // 출력: 2

반면, 일반 객체는 유용한 함수를 제공하지 않아 프로토타입 체인을 통해 제공되는 함수를 활용해야 한다. 이 특징은 제공하는 함수가 제한적이어서 원하고자하는 데이터를 찾을 때 순회 방법을 사용하거나 불편함을 따른다.

 

4. 사이즈 속성 및 이터러블

Map 객체는 size 속성을 통해 요소의 개수를 쉽게 확인할 수 있다. 또한, 이터러블(iterable)한 특성을 가지고 있어 반복문이나 순회 함수를 사용하여 요소에 접근할 수 있다.

const map = new Map();

map.set("a", 1);
map.set("b", 2);
map.set("c", 3);

console.log(map.size); // 출력: 3

// Map 객체를 배열로 변환하여 순회
const entriesArray = Array.from(map);
console.log(entriesArray); // 출력: [["a", 1], ["b", 2], ["c", 3]]

// 키 배열과 값 배열를 추출하여 순회
const keysArray = Array.from(map.keys());
const valueArray = Array.from(map.values());

console.log(keysArray); // 출력: ["a", "b", "c"]
console.log(valuesArray); // 출력: [1, 2, 3]

 

Map 객체는 배열로 변환하거나 키와 값에 직접 접근해서 원하는 작업을 수행할 수 있기에 요소의 순회, 검색, 변환 등의 작업을 간편하게 할 수 있다.

 

5. 중복 허용 불가

Map 객체는 다른 객체와 달리 키의 중복을 허용하지 않는다. 동일한 키로 값을 추가하면 기존 값은 덮어쓰게 된다.

const map = new Map();

map.set("a", 1);
map.set("b", 2);
map.set("a", 3); // 기존 "a" 키에 대한 값이 덮어씌워짐

console.log(map.get("a")); // 출력: 3
console.log(map.size); // 출력: 2

---

Map 객체 메소드

Map 객체 생성

 Map 객체를 생성하기 위해서는 new 키워드와 함께 Map 생성자를 호출해야 한다.

let map = new Map();

 

위 코드 처럼 Map을 선언하면 Map 객체를 만들 수 있다.

 

또는 초기값을 넣어 키와 값의 배열을 전달해 Map 객체를 생성할 수 도 있다.

let player = new Map([
   ["Kevin", 10],
   ["Haaland", 20],
   ["Messi", 30]
]);

// { 'Kevin' => 10, 'Haaland' => 20, 'Messi' => 30 }

 

Map 데이터 추가

Map 객체에 데이터를 추가하기 위해서 set()함수를 사용한다.

let map = new Map();

map.set('하나', 1);
map.set('둘', 2);

//{ '하나' => 1, '둘' => 2 }

 

Map 데이터 조회

Map 객체에 데이터를 조회하기 위해서는 get()함수를 사용한다.

map.get('하나'); // 1
map.get('둘'); // 2

 

Map 크기 조회

Map 객체에 데이터 크기를 조회하기 위해서는 size 프로퍼티를 사용한다.

console.log(map.size); // 2

 

Map 특정 키 조회

Map 객체에 특정 키를 가지고 있는지 확인하기 위해서는 has()함수를 사용한다.

map.has('하나'); // true
map.has('셋'); // false

 

Map 특정 키 삭제

Map 객체에 특정 데이터를 삭제하기 위해서는 delete() 함수를 사용한다.

map.delete('하나');
console.log(map.size); // 1

 

Map 모든 데이터 삭제

Map 객체에 모든 데이터를 삭제하기 위해서는 clear() 함수를 사용한다.

map.clear();
console.log(map.size); // 0

 

Map 객체 순회

Map 객체를 순회하기 위해서는 for - of 구문이나 forEach() 함수를 이용할 수 있다.

// for-of 구문
for(let [key, value] of map){
	console.log(key, value);
}

// forEach() 구문
map.forEach((value, key) => {
	console.log(key, value);
});