[JavaScript] 자바스크립트 Map 객체

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

---

Map 객체

Map 객체 생성

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

let map = new Map();

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

 

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

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

 

 

Map 데이터 추가

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

let map = new Map();

map.set("apple", 10);
map.set("banana", 20);
map.set("orange", 15);

 

 

Map 데이터 조회

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

map.get("apple"); // 10
map.get("banana"); // 20

 

 

Map 크기 조회

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

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

 

 

Map 특정 키 조회

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

map.has("apple"); // true
map.has("grape"); // false

 

 

Map 특정 키 삭제

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

map.delete("orange");
console.log(map.size); // 2

 

 

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);
});

---

Map 객체의 장점

Map 객체는 다음과 같은 장점을 가지고 있다.

 

① 유연한 자료형 사용

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

const map = new Map();

// 문자열 키
map.set("name", "John");

// 숫자 키
map.set(1, "One");

// 객체 키
const key = { id: 1 };
map.set(key, "Value");

console.log(map.get("name")); // 출력: John
console.log(map.get(1)); // 출력: One
console.log(map.get(key)); // 출력: Value

Map 객체가 다양한 키를 넣을 수 있는 반면, 일반 객체는의 키는 문자열 또는 심볼(symbol) 형태여야 한다.

 

아래 코드를 보면 일반 객체는 문자열, 객체, 심볼 등을 키로 사용해 출력하는데 문제가 없지만, 숫자 키값을 사용해 출력하면 숫자 키가 자동으로 숫자 문자열로 변환 된다. obj[123]과 obj["123"] 이렇게 키값을 숫자와 문자열로 다르게 입력했는데, 숫자 123이 문자열로 변환되어 문자열 키값 obj["123"]과 똑같이 출력되는 것을 볼 수 있다.

const obj = {};

// 일반 객체의 키로 다양한 형식의 값 사용
const key1 = '문자열 키';
const key2 = { name: '객체 키' };
const key3 = Symbol('심볼 키');
const key4 = 123; // 숫자를 일반 객체의 키로 사용

obj[key1] = '일반 객체 값';
obj[key2] = '일반 객체 값';
obj[key3] = '일반 객체 값';
obj[key4] = '숫자 객체 값'; // key4는 자동으로 문자열로 변환됨

console.log(obj[key1]); // 출력: '일반 객체 값'
console.log(obj[key2]); // 출력: '일반 객체 값'
console.log(obj[key3]); // 출력: '일반 객체 값'

console.log(obj[key4]); // 출력: '숫자 객체 값'
console.log(obj[123]); // 출력: '숫자 객체 값'
console.log(obj["123"]); // 출력: '숫자 객체 값'

 

 

② 순서 보장

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

 

 

③ 빠른 검색 및 삭제 

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

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

const obj = {
  key1: '값 1',
  key2: '값 2'
};

console.log(obj[key1]); // 출력: '값 1'
console.log('key2' in obj); // 출력: true

// 1. delete obj[key]: 객체에서 지정된 키와 해당하는 값을 삭제
delete obj.key1;
console.log('key1' in obj); // 출력: false

// 2. Object.keys(obj): 객체의 키들로 이루어진 배열을 반환
const keys = Object.keys(obj);
console.log(keys); // 출력: ['key2']

// 3. Object.values(obj): 객체의 값들로 이루어진 배열을 반환
const values = Object.values(obj);
console.log(values); // 출력: ['값 2']

// 4. Object.entries(obj): 객체의 키-값 쌍을 배열로 반환합니다.
const entries = Object.entries(obj);
console.log(entries); // 출력: [['key2', '값 2']]

// 5. 사이즈 조회
console.log(Object.keys(obj).length); // 출력: 1

 

 

④ 사이즈 속성 및 이터러블

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 valuesArray = Array.from(map.values());
console.log(keysArray); // 출력: ["a", "b", "c"]
console.log(valuesArray); // 출력: [1, 2, 3]

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

 

 

⑤ 중복 허용 불가

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 객체의 장점을 통해 개발자는 다양한 상황에서 유연하고 효율적인 데이터 구조를 구현할 수 있다.