JavaScript Map 이란 무엇인가?

1. JavaScript Map 객체 소개

ES6 이전에는 키를 모든 유형의 값에 매핑하여 맵을 에뮬레이트하기 위해 객체를 자주 사용했습니다. 그러나 객체를 지도로 사용하면 몇 가지 부작용이 있습니다.

 

1. 객체에는 항상 프로토타입과 같은 기본 키가 있습니다.
2. 객체의 키는 문자열 또는 기호여야 하며 객체를 키로 사용할 수 없습니다.
3. 개체에는 지도의 크기를 나타내는 속성이 없습니다.

ES6은 이러한 결함을 해결하는 Map이라는 새로운 컬렉션 유형을 제공합니다.

 

정의에 따라 Map 객체는 모든 유형의 값을 키 또는 값으로 사용할 수 있는 키-값 쌍을 보유합니다. 또한 Map 객체는 키의 원래 삽입 순서를 기억합니다.

 

새 맵을 만들려면 다음 구문을 사용합니다.

let map = new Map([iterable]);

 

Map()은 요소가 키-값 쌍인 선택적 반복 가능한 객체를 허용합니다.

 

2. 유용한 JavaScript Map 메소드

• clear() – 지도 객체에서 모든 요소를 ​​제거합니다.
• delete(key) – 키로 지정된 요소를 제거합니다. 요소가 맵에 있으면 반환하고 그렇지 않으면 false를 반환합니다.
• entries() – 맵 개체의 각 요소에 대한 [키, 값] 배열을 포함하는 새 Iterator 개체를 반환합니다. 지도에서 개체의 순서는 삽입 순서와 동일합니다.
• forEach(callback[, thisArg]) – 삽입 순서에서 맵의 각 키-값 쌍에 대한 콜백을 호출합니다. 선택적 thisArg 매개변수는 각 콜백에 대해 this 값을 설정합니다.
• get(key) – 키와 관련된 값을 반환합니다. 키가 존재하지 않으면 undefined를 반환합니다.
• has(key) – 키와 관련된 값이 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다.
• keys() – 삽입 순서로 요소에 대한 키를 포함하는 새 Iterator를 반환합니다.
• set(key, value) – 지도 객체의 키 값을 설정합니다. 지도 개체 자체를 반환하므로 이 메서드를 다른 메서드와 연결할 수 있습니다.
• values() - 삽입 순서로 각 요소에 대한 값을 포함하는 새 반복기 객체를 반환합니다.

 

3. Map 예제

1) new Map object 생성

다음과 같은 사용자 개체 목록이 있다고 가정합니다.

let john = {name: 'John Doe'},
    lily = {name: 'Lily Bush'},
    peter = {name: 'Peter Drucker'};

사용자 및 역할 맵을 생성해야 한다고 가정합니다. 이 경우 다음 코드를 사용합니다.

let userRoles = new Map();

userRoles는 Map 객체의 인스턴스이고 해당 유형은 다음 예제와 같이 객체입니다.

console.log(typeof(userRoles)); // object
console.log(userRoles instanceof Map); // true

 

2) elements(요소) 추가

사용자에게 역할을 할당하려면 set() 메서드를 사용합니다.

userRoles.set(john, 'admin');

set() 메서드는 사용자 john을 관리자 역할과 매핑합니다. set() 메서드는 연결 가능하므로 다음 예제와 같이 일부 입력을 저장할 수 있습니다.

userRoles.set(lily, 'editor')
          .set(peter, 'subscriber');

 

3) 반복(iterable) 가능한 객체로 Map 초기화

앞서 언급했듯이 반복 가능한 객체를 Map() 생성자에 전달할 수 있습니다.

let userRoles = new Map([
    [john, 'admin'],
    [lily, 'editor'],
    [peter, 'subscriber']
]);

 

4) 키로 Map 에서 요소(element) 가져오기

John 의 역할을 보려면 get() 메서드를 사용합니다.

userRoles.get(john); // admin

존재하지 않는 키를 전달하면 get() 메서드는 정의되지 않은 값을 반환합니다.

let foo = {name: 'Foo'};
userRoles.get(foo); //undefined

 

5) 키로 요소(element) 의 존재 여부 확인

Map에 키가 있는지 확인하려면 has() 메서드를 사용합니다.

userRoles.has(foo); // false
userRoles.has(lily); // true

 

6) Map의 요소(element) 갯수 가져오기

size 속성은 Map의 항목 갯수를 반환합니다.

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

 

7) Map 객체의 Key 반복(Iterate)

Map 객체의 키를 가져오려면 keys() 메서드를 사용합니다. keys()는 맵에 있는 요소의 키를 포함하는 새 반복자 객체를 반환합니다.

 

다음 예에서는 userRoles 맵 개체에 있는 사용자의 사용자 이름을 표시합니다.

let john = { name: 'John Doe' },
  lily = { name: 'Lily Bush' },
  peter = { name: 'Peter Drucker' };

let userRoles = new Map([
  [john, 'admin'],
  [lily, 'editor'],
  [peter, 'subscriber'],
]);

for (const user of userRoles.keys()) {
  console.log(user.name);
}

Output:

John Doe
Lily Bush
Peter Drucker

 

8) Map 값 반복

마찬가지로 values() 메서드를 사용하여 맵의 모든 요소에 대한 값을 포함하는 반복자 객체를 가져올 수 있습니다.

let john = { name: 'John Doe' },
  lily = { name: 'Lily Bush' },
  peter = { name: 'Peter Drucker' };

let userRoles = new Map([
  [john, 'admin'],
  [lily, 'editor'],
  [peter, 'subscriber'],
]);

for (let role of userRoles.values()) {
  console.log(role);
}

Output:

admin
editor
subscriber

 

9) Map 객체 요소에 대해 반복

또한, entries() 메서드는 Map 객체에 있는 각 요소의 [key,value] 배열을 포함하는 반복자 객체를 반환합니다.

let john = { name: 'John Doe' },
  lily = { name: 'Lily Bush' },
  peter = { name: 'Peter Drucker' };

let userRoles = new Map([
  [john, 'admin'],
  [lily, 'editor'],
  [peter, 'subscriber'],
]);

for (const role of userRoles.entries()) {
  console.log(`${role[0].name}: ${role[1]}`);
}

반복을 보다 자연스럽게 하기 위해 다음과 같이 구조 분해를 사용할 수 있습니다.

let john = { name: 'John Doe' },
  lily = { name: 'Lily Bush' },
  peter = { name: 'Peter Drucker' };

let userRoles = new Map([
  [john, 'admin'],
  [lily, 'editor'],
  [peter, 'subscriber'],
]);

for (let [user, role] of userRoles.entries()) {
  console.log(`${user.name}: ${role}`);
}

for...of 루프 외에도 지도 객체의 forEach() 메서드를 사용할 수 있습니다.

let john = { name: 'John Doe' },
  lily = { name: 'Lily Bush' },
  peter = { name: 'Peter Drucker' };

let userRoles = new Map([
  [john, 'admin'],
  [lily, 'editor'],
  [peter, 'subscriber'],
]);

userRoles.forEach((role, user) => console.log(`${user.name}: ${role}`));

 

10) Map 객체의  키 또는 값을 배열로 변환

때때로 반복 가능한 객체 대신 배열로 작업하고 싶을 때가 있습니다. 이 경우 스프레드 연산자를 사용할 수 있습니다.

다음 예제에서는 각 요소의 키를 키 배열로 변환합니다.

var keys = [...userRoles.keys()];
console.log(keys);

Output:

[ { name: 'John Doe' },
  { name: 'Lily Bush' },
  { name: 'Peter Drucker' } ]

그리고 다음은 요소의 값을 배열로 변환합니다.

let roles = [...userRoles.values()];
console.log(roles);

Output:

[ 'admin', 'editor', 'subscriber' ]

 

11) 키로 요소(element) 삭제

맵에서 항목을 삭제하려면 delete() 메서드를 사용합니다.

userRoles.delete(john);

 

12) Map 객체의 모든 요소 삭제 

Map 객체의 모든 항목을 삭제하려면 clear() 메서드를 사용합니다.

userRoles.clear();

따라서 지도의 크기는 이제 0입니다.

console.log(userRoles.size); // 0

 

4. WeakMap 이란?

WeakMap은 WeakMap의 키가 객체여야 한다는 점을 제외하고는 Map과 유사합니다. 즉, 키(객체)에 대한 참조가 범위를 벗어나면 해당 값이 자동으로 메모리에서 해제됩니다.

 

WeakMap에는 Map 개체의 하위 집합 메서드만 있습니다.

•  get(key)
•  set(key, value)
•  has(key)
•  delete(key)

다음은 지도와 WeekMap의 주요 차이점입니다.

• WeakMap의 요소는 반복될 수 없습니다.
• 한 번에 모든 요소를 지울 수 없습니다.
• WeakMap의 크기를 확인할 수 없습니다.

 

 

 

 

 

 

Reference: https://www.javascripttutorial.net/es6/javascript-map/