자바스크립트 자료형 Map 학습 및 정리하기

코드에 현실 세계를 반영하기 위해서 다양한 자료구조들이 있지만 기존의 것들 만으로는 부족하기 때문에 Map, Set이 추가되었다. 이 Map과 Set은 기존의 자료구조와 비슷한 점이 있으면서도 다른 점이 있다. 기존에 사용하던 객체와 배열로는 구현하기 어려웠던 특정한 기능들 또한 제공한다.

 

Map

---

Map은 객체와 같이 key-value의 형태로 데이터를 저장한다는 점에서 객체와 유사하다. 하지만 몇 가지 중요한 차이점들이 존재한다.

 

 

1. 차이점

• 키의 값으로 모든 타입의 값을 사용할 수 있다. (객체는 문자열 형태로 저장)
• 데이터의 삽입 순서를 가지고 있다.
• 크기를 쉽게 얻을 수 있다.
• 반복이 쉽다.

 

2. Map 생성하기

const myMap = new Map();

 

Map( ) 생성자를 통해 Map을 생성하고 반드시 new 키워드가 있어야 한다. new 키워드가 없다면 타입 에러가 발생한다.

 

3. Map에 데이터 추가하기

const myMap = new Map(); // myMap.set(key, value) 의 형식
myMap.set(1, 'one')
myMap.set(2, 'two')
myMap.set(3, 'three')
console.log(myMap)
// Map(3) {1 => 'one', 2 => 'two', 3 => 'three'} 출력

 

Map( ) 생성자를 통해 Map을 생성하고 set(key, value) 메서드를 통해 Map에 데이터를 추가할 수 있다. 위와 같이 set( ) 메서드를 통해 생성한 맵은 new Map( ) 생성자에 2차원 배열을 통해 한 번에 생성할 수 있다.

 

 

const myMap = new Map([
  [1, "one"],
  [2, "two"],
  [3, "three"],
]);

console.log(myMap);

// Map(3) {1 => 'one', 2 => 'two', 3 => 'three'}

 

Map은 값이 삽입된 순서를 기억하기 때문에 set( )을 통해 삽입했다면 그 삽입한 순서대로 순서를 가지고 있다.

 

4. Map 데이터 가져오기

const myMap = new Map([
  [1, "one"],
  [2, "two"],
  [3, "three"],
]);

console.log(myMap.get(1)) // one 출력

 

get(key) 메서드를 통해 값을 가져올 수 있다. key가 존재하지 않는다면 undefined를 출력한다.

 

5. 그 외 다양한 메서드

const myMap = new Map([
  [1, "one"],
  [2, "two"],
  [3, "three"],
]);

console.log(myMap.has(1)) // true
console.log(myMap.delete(1)) // Map(2) {2 => 'two', 3 => 'three'}
console.log(myMap.size) // 요소의 크기 확인 2출력
console.log(myMpa.clear()) // 모든 요소를 삭제

 

• has(key) : 메서드를 통해 주어진 키의 요소의 존재 여부를 불리언 값으로 반환한다.
• delete(key) : 메서드를 통해 주어진 키의 요소를 삭제한다.
• size : 속성을 통해 요소의 크기를 확인한다.
• clear( ) : 메서드를 통해 모든 요소를 삭제한다.

 

6. Map의 반복작업

const myMap = new Map([
  [1, "one"],
  [2, "two"],
  [3, "three"],
]);

console.log(myMap.keys()) // MapIterator {1, 2, 3}
console.log(myMap.values()) // MapIterator {'one', 'two', 'three'}
console.log(myMap.entries()) // MapIterator {1 => 'one', 2 => 'two', 3 => 'three'}

 

Map은 반복작업을 수행할 수 있는데 이는 Map 자체적으로 iterable(반복 가능) 하기 때문이다. Map의 반복작업에 수행되는 메서드는 keys( ), values( ), entries( ) 가 있는데 모두 iterable 한 객체를 반환한다. keys( )는 각 요소의 키를 모아 반환, values( )는 각 요소의 value를 모아 반환, entries( )는 key, value를 한 쌍으로 하여 반환한다. 그렇기 때문에 for ...of 문을 통해 반복을 사용할 수 있는 아래의 예시를 보면 좀 더 이해하기 쉽다.

 

const myMap = new Map([
  [1, "one"],
  [2, "two"],
  [3, "three"],
]);  

const myObj = {
  1: "one",
  2: "two",
  3: "three",
};

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

for (const value of myObj) {
  console.log(value); //TypeError: myObj is not iterable
}

 

각각의 Map과 객체를 만들고 각각의 값에 접근하기 위해 for ... of 문을 사용하려고 하면 객체의 for 문에서 타입 에러가 발생하는데 iterable 하지 않다. 즉 반복이 가능하지 않다는 문구가 출력된다. Map은 바로 for ...of 문을 사용해서 key 값과 value 값에 접근할 수 있다.

 

for (const key in myObj) {
  console.log(myObj[key]);
}

 

하지만 객체는 for ... in 문을 사용하여 key에 접근 후 다시 값에 접근해야 하는 문제가 있다. 이것이 iterable의 차이라고 볼 수 있다.

 

for (let [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

 

 

하지만 Object.entries( )를 사용해서 각각의 키와 값에 접근할 수 있는데 객체를 iterable 한 key, value 쌍의 배열로 반환하여 주기 때문에 for ...of 문을 사용할 수 있다. 하지만 순서를 가지고 있는 Map 과 다르게 Object.entries( )는 순서를 가지지 않는다.