Map

Map의 사용법을 예시 코드와 함께 정리해보도록 하겠습니다.

 

 

 

JavaScript의 주요 이터러블(배열, Set, Map)

 

 

 

Map

객체가 다른 곳에서 사용이 되거나 복사되어 쓰이는 경우 객체 자체에 추가적인 정보를 담고 싶지 않을 수 있습니다.

 

객체에 몇 가지 정보를 추가하고 싶지만 정보를 객체에 병합하고 싶지 않은 경우 Map을 사용하면 유용합니다.

const personData = new Map();

Map은 항상 new를 사용하여 생성해주며 위와 같이 사용할 경우 빈 Map이 생성되게 됩니다.

 

 

const personData = new Map([["key", "some value"]]);

console.log(personData);

Map 생성자는 배열의 배열, 즉 중첩 배열로 초기화할 수 있습니다. 

 

Map은 배열 안에 키-값 쌍을 가진 배열들로 구성된 배열의 배열이기 때문에 중첩 배열을 가지는 것입니다.

 

key에는 문자열이나 숫자 등 어떤 자료형이든 들어갈 수 있으며 value도 어떤 자료형이든 들어갈 수 있습니다.

 

 

 

const person1 = { name: "SH" };
const person2 = { name: "RT" };

const personData = new Map([[person1, [{ date: "2022-09-11", price: 10000 }]]]);

console.log(personData);

배열 안에는 person1이라는 객체가 key로 사용되었고 value에는 person1 객체에 직접 추가하고 싶지 않았던 추가적인 정보를 넣을 수 있습니다.

(예를 들어 person1의 구매 정보를 담은 배열을 value에 넣을 수 있습니다.)

 

배열이 많아 헷갈릴 수도 있는데 전체를 감싸는 배열이 하나 있고, 안에 Map에 추가하려는 하나의 key-value 쌍이 있는 배열이 있는 것입니다.

 

위의 예시 코드에서는 value에는 또 다른 배열을 가지지만 배열 외에도 다양한 형태의 자료가 들어갈 수 있습니다.

 

출력 형태가 조금 낯설게 느껴지지만 key가 person1 객체이며,

 

value는 { date: "2022-09-11", price: 10000 }의 요소를 가진 배열이 요소인 것을 확인할 수 있습니다.

 

 

 

const person1 = { name: "SH" };
const person2 = { name: "RT" };

const personData = new Map([[person1, [{ date: "2022-09-11", price: 10000 }]]]);

console.log(personData.get(person1));

Map에 저장된 정보는 객체와 두텁게 연결되어 있습니다.

 

즉 person1 객체와 Map의 key로 받은 person1은 동일한 메모리 공간을 사용하기 때문에 Map에서 쉽게 객체 데이터를 가져와 사용할 수 있습니다.

 

위의 예시 코드처럼 Map에 get() 함수를 사용하여 key를 전달하면 해당 key에 대한 값을 반환받을 수 있습니다.

 

get() 함수에 인자로 사용된 person1과 Map의 person1 또한 같은 메모리 공간을 사용합니다.

 

이때 get() 함수는 동등 비교를 수행하게 되며 동일하다면 문제없이 동작하게 됩니다.

 

// Map를 이용한 객체의 추가 정보 저장
const person1 = { name: "SH" };

const personData1 = new Map([
  [person1, [{ date: "2022-09-11", price: 10000 }]],
]);

console.log(personData1.get(person1));

// 새로운 객체를 만들어 추가 정보 저장
const person2 = { name: "RT" };

const personData2 = { RT: { date: "2022-09-10", price: 12000 } };

console.log(personData2[person2.name]);

위의 예시 코드에서 새로운 객체에 추가 정보를 저장을 하니 기준이 되는 객체의 value를 가져와 key로 따로 지정해줘야 하는 번거로움이 있습니다. 

 

객체가 아닌 Map에 추가 정보를 저장하면 기준이 되는 객체 자체를 키로 사용할 수 있기 때문에 기준이 되는 객체의 value 값을 따로 추가하지 않아도 추가 정보를 쉽게 저장이 가능합니다.

 

 

 

const person1 = { name: "SH" };
const person2 = { name: "RT" };

const personData1 = new Map([
  [person1, [{ date: "2022-09-11", price: 10000 }]],
]);

personData1.set(person2, [{ date: "2022-09-10", price: 12000 }]);

console.log(personData1);

Map에 데이터를 추가할 때는 set() 메서드를 사용하시면 됩니다.

 

set() 메서드의 인자로는 key-value 쌍을 받을 수 있습니다.

 

 

---

 

 

Map에 저장된 데이터를 출력하는 방법 3가지를 예시 코드와 정리해보도록 하겠습니다.

 

 

const person1 = { name: "SH" };
const person2 = { name: "RT" };

const personData1 = new Map([
  [person1, [{ date: "2022-09-11", price: 10000 }]],
  [person2, [{ date: "2022-09-10", price: 12000 }]],
]);

for (const entry of personData1.entries()) {
  console.log(entry);
}

1. entries() 메서드를 사용합니다.

기본적으로 두 개의 요소를 가진 배열, 즉 첫 번째 요소는 key 두 번째 요소는 value인 배열을 반환하게 됩니다.

 

 

 

const person1 = { name: "SH" };
const person2 = { name: "RT" };

const personData1 = new Map([
  [person1, [{ date: "2022-09-11", price: 10000 }]],
  [person2, [{ date: "2022-09-10", price: 12000 }]],
]);

for (const [key, value] of personData1.entries()) {
  console.log(key, value);
}

2. 배열 구조 분해를 통해 key와 value를 추출합니다

[] 안에 상수의 이름은 원하는 대로 지정이 가능하며 해당 상수에 배열 안 각 위치에 있는 값이 담기게 됩니다.

즉  상수 key에는 배열 안 key의 값인 {name: 'SH'}가, 상수 value에는 배열 안 value의 값인 추가 정보가 담기게 됩니다.

 

배열 구조 분해

 

 

 

const person1 = { name: "SH" };
const person2 = { name: "RT" };

const personData1 = new Map([
  [person1, [{ date: "2022-09-11", price: 10000 }]],
  [person2, [{ date: "2022-09-10", price: 12000 }]],
]);

for (const key of personData1.keys()) {
  console.log(key);
}

3-1. key에만 목적이 있는 경우에 keys() 함수를 사용합니다.

keys() 함수를 사용하면 모든 키에 접근이 가능합니다. 

3-2.value에만 목적이 있는 경우 values() 함수를 사용합니다.

위의 예시 코드에서 keys() 함수 자리에 values()를 사용해주면 모든 value에 접근이 가능합니다

 

 

 

---

Map에서 사용 가능한 메서드를 조금 더 정리해보도록 하겠습니다.

 

clear() 메서드

const person1 = { name: "SH" };
const person2 = { name: "RT" };

const personData1 = new Map([
  [person1, [{ date: "2022-09-11", price: 10000 }]],
  [person2, [{ date: "2022-09-10", price: 12000 }]],
]);

personData1.clear();

console.log(personData1);

clear() 메서드를 사용하면 Map의 모든 데이터를 삭제합니다.

 

 

delete() 메서드

const person1 = { name: "SH" };
const person2 = { name: "RT" };

const personData1 = new Map([
  [person1, [{ date: "2022-09-11", price: 10000 }]],
  [person2, [{ date: "2022-09-10", price: 12000 }]],
]);

personData1.delete(person1);

delete() 메서드를 사용하면 인자로 받은 key에 해당하는 데이터를 삭제합니다.

 

 

has() 메서드

const person1 = { name: "SH" };
const person2 = { name: "RT" };

const personData1 = new Map([
  [person1, [{ date: "2022-09-11", price: 10000 }]],
  [person2, [{ date: "2022-09-10", price: 12000 }]],
]);

console.log(personData1.has(person1)); // true 출력

has() 메서드를 사용하면 인자로 받은 값이 key로 가진 요소가 있는지를 확인할 수 있습니다.

 

있으면 true, 없으면 false를 반환합니다.

 

 

size

const person1 = { name: "SH" };
const person2 = { name: "RT" };

const personData1 = new Map([
  [person1, [{ date: "2022-09-11", price: 10000 }]],
  [person2, [{ date: "2022-09-10", price: 12000 }]],
]);

console.log(personData1.size); // 2	출력

size는 메서드는 아니고 프로퍼티로 사용하면 Map의 길이를 확인할 수 있습니다.

 

 

 

 

 

 

 

 

정리

어떤 데이터 형식이든 key가 될 수 있으며 추가 정보를 추가할 수 있는데 추가한 정보는 객체에 추가되지 않고 Map에 저장됩니다.

 

Map에 저장된 데이터는 다른 곳에서 사용이 가능합니다.