1. JavaScript Map 객체 소개
ES6 이전에는 키를 모든 유형의 값에 매핑하여 맵을 에뮬레이트하기 위해 객체를 자주 사용했습니다. 그러나 객체를 지도로 사용하면 몇 가지 부작용이 있습니다.
- 객체에는 항상 프로토타입과 같은 기본 키가 있습니다.
- 객체의 키는 문자열 또는 기호여야 하며 객체를 키로 사용할 수 없습니다.
- 개체에는 지도의 크기를 나타내는 속성이 없습니다.
ES6은 이러한 결함을 해결하는 Map이라는 새로운 컬렉션 유형을 제공합니다.
정의에 따라 Map 객체는 모든 유형의 값을 키 또는 값으로 사용할 수 있는 키-값 쌍을 보유합니다. 또한 Map 객체는 키의 원래 삽입 순서를 기억합니다.
새 맵을 만들려면 다음 구문을 사용합니다.
javascript
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 생성
다음과 같은 사용자 개체 목록이 있다고 가정합니다.
javascript
let john = {name: 'John Doe'},
lily = {name: 'Lily Bush'},
peter = {name: 'Peter Drucker'};
사용자 및 역할 맵을 생성해야 한다고 가정합니다. 이 경우 다음 코드를 사용합니다.
javascript
let userRoles = new Map();
userRoles는 Map 객체의 인스턴스이고 해당 유형은 다음 예제와 같이 객체입니다.
javascript
console.log(typeof(userRoles)); // object
console.log(userRoles instanceof Map); // true
2) elements(요소) 추가
사용자에게 역할을 할당하려면 set() 메서드를 사용합니다.
javascript
userRoles.set(john, 'admin');
set() 메서드는 사용자 john을 관리자 역할과 매핑합니다. set() 메서드는 연결 가능하므로 다음 예제와 같이 일부 입력을 저장할 수 있습니다.
javascript
userRoles.set(lily, 'editor')
.set(peter, 'subscriber');
3) 반복(iterable) 가능한 객체로 Map 초기화
앞서 언급했듯이 반복 가능한 객체를 Map() 생성자에 전달할 수 있습니다.
javascript
let userRoles = new Map([
[john, 'admin'],
[lily, 'editor'],
[peter, 'subscriber']
]);
4) 키로 Map 에서 요소(element) 가져오기
John 의 역할을 보려면 get() 메서드를 사용합니다.
javascript
userRoles.get(john); // admin
존재하지 않는 키를 전달하면 get() 메서드는 정의되지 않은 값을 반환합니다.
javascript
let foo = {name: 'Foo'};
userRoles.get(foo); //undefined
5) 키로 요소(element) 의 존재 여부 확인
Map에 키가 있는지 확인하려면 has() 메서드를 사용합니다.
javascript
userRoles.has(foo); // false
userRoles.has(lily); // true
6) Map의 요소(element) 갯수 가져오기
size 속성은 Map의 항목 갯수를 반환합니다.
javascript
console.log(userRoles.size); // 3
7) Map 객체의 Key 반복(Iterate)
Map 객체의 키를 가져오려면 keys() 메서드를 사용합니다. keys()는 맵에 있는 요소의 키를 포함하는 새 반복자 객체를 반환합니다.
다음 예에서는 userRoles 맵 개체에 있는 사용자의 사용자 이름을 표시합니다.
javascript
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:
javascript
John Doe
Lily Bush
Peter Drucker
8) Map 값 반복
마찬가지로 values() 메서드를 사용하여 맵의 모든 요소에 대한 값을 포함하는 반복자 객체를 가져올 수 있습니다.
javascript
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:
javascriptadmin editor subscriber
9) Map 객체 요소에 대해 반복
또한, entries() 메서드는 Map 객체에 있는 각 요소의 [key,value] 배열을 포함하는 반복자 객체를 반환합니다.
javascript
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]}`);
}
반복을 보다 자연스럽게 하기 위해 다음과 같이 구조 분해를 사용할 수 있습니다.
javascript
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() 메서드를 사용할 수 있습니다.
javascript
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 객체의 키 또는 값을 배열로 변환
때때로 반복 가능한 객체 대신 배열로 작업하고 싶을 때가 있습니다. 이 경우 스프레드 연산자를 사용할 수 있습니다.
다음 예제에서는 각 요소의 키를 키 배열로 변환합니다.
javascript
var keys = [...userRoles.keys()];
console.log(keys);
Output:
javascript
[ { name: 'John Doe' },
{ name: 'Lily Bush' },
{ name: 'Peter Drucker' } ]
그리고 다음은 요소의 값을 배열로 변환합니다.
javascript
let roles = [...userRoles.values()];
console.log(roles);
Output:
javascript
[ 'admin', 'editor', 'subscriber' ]
11) 키로 요소(element) 삭제
맵에서 항목을 삭제하려면 delete() 메서드를 사용합니다.
javascript
userRoles.delete(john);
12) Map 객체의 모든 요소 삭제
Map 객체의 모든 항목을 삭제하려면 clear() 메서드를 사용합니다.
javascript
userRoles.clear();
따라서 지도의 크기는 이제 0입니다.
javascript
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/
'Programing > Javascript' 카테고리의 다른 글
JavaScript Array.of()란 무엇인가? (0) | 2022.07.06 |
---|---|
JavaScript Set object란 무엇인가? (0) | 2022.07.06 |
JavaScript Promise Error Handling (0) | 2022.07.05 |
JavaScript Promise Chaining(Promise 연쇄사용법) (0) | 2022.07.05 |
JavaScript Promises 무엇인가? (0) | 2022.07.04 |
댓글