Map 객체는 키와 값의 쌍으로 이루어진 컬렉션이다. Map 객체는 객체와 유사하지만 차이점이 있다.
| 구분 | 객체 | Map 객체 |
|---|---|---|
| 키로 사용할 수 있는 값 | 문자열 또는 심벌 값 | 객체를 포함한 모든 값 |
| 이터러블 | X | O |
| 요소 개수 확인 | Object.keys(obj).length |
map.size |
37-26
const map = new Map();
console.log(map); // Map(0) {}Map 객체는 Map 생성자 함수로 생성한다.
Map 생성자 함수에 인수를 전달하지 않으면 빈 Map 객체가 생성된다.
37-27
const map1 = new Map([['key1', 'value1'], ['key2', 'value2']]);
console.log(map1); // Map(2) {"key1" => "value1", "key2" => "value2"}
const map2 = new Map([1, 2]); // TypeError: Iterator value 1 is not an entry objectMap 생성자 함수는 이터러블을 인수로 전달받아 Map 객체를 생성한다.
이때 인수로 전달되는 이터러블은 키와 값의 쌍으로 이루어진 요소로 구성되어야 한다.
👩🏻💻❓ const map2 를 올바르게 작성하려면 어떻게 해야 할까요?
37-28
const map = new Map([['key1', 'value1'], ['key1', 'value2']]);
console.log(map); // Map(1) {"key1" => "value2"}Map 생성자 함수의 인수로 전달한 이터러블에 중복된 키를 갖는 요소가 존재하면 값이 덮어써진다.
따라서 Map 객체에는 중복된 키를 갖는 요소가 존재할 수 없다.
37-29
const { size } = new Map([['key1', 'value1'], ['key2', 'value2']]);
console.log(size); // 2Map 객체의 요소 개수를 확인할 때는 Map.prototype.size 프로퍼티를 사용한다.
37-30
const map = new Map([['key1', 'value1'], ['key2', 'value2']]);
console.log(Object.getOwnPropertyDescriptor(Map.prototype, 'size'));
// {set: undefined, enumerable: false, configurable: true, get: ƒ}
map.size = 10; // 무시된다.
console.log(map.size); // 2size 프로퍼티는 setter 함수 없이 getter 함수만 존재하는 접근자 프로퍼티다.
setter 함수가 없기 때문에 size 프로퍼티에 숫자를 할당하여 Map 객체의 요소 개수를 변경할 수 없다.
getter 함수 |
setter 함수 |
|---|---|
| 프로퍼티에 접근할 때 해당 값을 반환하는 함수 | 프로퍼티에 값을 할당할 때 호출되는 함수 |
37-31
const map = new Map();
console.log(map); // Map(0) {}
map.set('key1', 'value1');
console.log(map); // Map(1) {"key1" => "value1"}Map 객체에 요소를 추가할 때는 Map.prototype.set 메서드를 사용한다.
37-32
const map = new Map();
map
.set('key1', 'value1')
.set('key2', 'value2');
console.log(map); // Map(2) {"key1" => "value1", "key2" => "value2"}set 메서드는 새로운 요소가 추가된 Map 객체를 반환한다.
따라서 set 메서드를 호출한 후에 set 메서드를 연속적으로 호출할 수 있다.
37-33
const map = new Map();
map
.set('key1', 'value1')
.set('key1', 'value2');
console.log(map); // Map(1) {"key1" => "value2"}Map 객체에는 중복된 키를 갖는 요소가 존재할 수 없다.
중복된 키를 갖는 요소를 추가하면 값이 덮어써진다. 에러는 일어나지 않는다.
37-34
const map = new Map();
console.log(NaN === NaN); // false
console.log(0 === -0); // true
// NaN과 NaN을 같다고 평가하여 중복 추가를 허용하지 않는다.
map.set(NaN, 'value1').set(NaN, 'value2');
console.log(map); // Map(1) { NaN => 'value2' }
// +0과 -0을 같다고 평가하여 중복 추가를 허용하지 않는다.
map.set(0, 'value1').set(-0, 'value2');
console.log(map); // Map(2) { NaN => 'value2', 0 => 'value2' }일치 비교 연산자 === 를 사용하면 NaN 과 NaN 을 다르다고 평가한다.
하지만 Map 객체는 NaN 과 NaN 을 같다고 평가하여 중복 추가를 허용하지 않는다.
+0 과 -0은 일치 비교 연산자 === 와 마찬가지로 같다고 평가하여 중복 추가를 허용하지 않는다.
37-35
const map = new Map();
const lee = { name: 'Lee' };
const kim = { name: 'Kim' };
// 객체도 키로 사용할 수 있다.
map
.set(lee, 'developer')
.set(kim, 'designer');
console.log(map);
// Map(2) { {name: "Lee"} => "developer", {name: "Kim"} => "designer" }일반 객체와 Map 객체의 가장 큰 차이점 : 키 타입
| 일반 객체 | Map 객체 |
|---|---|
| 문자열 또는 심벌 값만 키로 사용 가능 | 제한 없음 = 객체를 포함한 모든 값을 키로 사용 가능 |
37-36
const map = new Map();
const lee = { name: 'Lee' };
const kim = { name: 'Kim' };
map
.set(lee, 'developer')
.set(kim, 'designer');
console.log(map.get(lee)); // developer
console.log(map.get('key')); // undefinedMap 객체에서 특정 요소를 취득하려면 Map.prototype.get 메서드를 사용한다.
get 메서드의 인수로 키를 전달하면 Map 객체에서 인수로 전달한 키를 갖는 값을 반환한다.
map.get 메서드에 존재하지 않는 키를 전달하면, 즉 map.get('key')와 같이 호출하면 해당 키에 대한 값이 존재하지 않기 때문에 undefined가 반환됩니다.
Map 객체에서 인수로 전달한 키를 갖는 요소가 존재하지 않을 때의 기본 반환값이다.
37-37
const lee = { name: 'Lee' };
const kim = { name: 'Kim' };
const map = new Map([[lee, 'developer'], [kim, 'designer']]);
console.log(map.has(lee)); // true
console.log(map.has('key')); // falseMap 객체에 특정 요소가 존재하는지 확인하려면 Map.prototype.has 메서드를 사용한다.
has 메서드는 특정 요소의 존재 여부를 나타내는 불리언 값을 반환한다.
get 메서드 |
has 메서드 |
|---|---|
| 특정 키에 해당하는 값을 반환 | 특정 키의 존재 여부를 확인 |
37-38
const lee = { name: 'Lee' };
const kim = { name: 'Kim' };
const map = new Map([[lee, 'developer'], [kim, 'designer']]);
map.delete(kim);
console.log(map); // Map(1) { {name: "Lee"} => "developer" }Map 객체의 요소를 삭제하려면 Map.prototype.delete 메서드를 사용한다.
delete 메서드는 삭제 성공 여부를 나타내는 불리언 값을 반환한다.
37-39
const map = new Map([['key1', 'value1']]);
// 존재하지 않는 키 'key2'로 요소를 삭제하려 하면 에러없이 무시된다.
map.delete('key2');
console.log(map); // Map(1) {"key1" => "value1"}존재하지 않는 키로 Map 객체의 요소를 삭제하려 하면 에러 없이 무시된다.
37-40
const lee = { name: 'Lee' };
const kim = { name: 'Kim' };
const map = new Map([[lee, 'developer'], [kim, 'designer']]);
map.delete(lee).delete(kim); // TypeError: map.delete(...).delete is not a functiondelete 메서드는 삭제 성공 여부를 나타내는 불리언 값을 반환한다.
따라서 set 메서드와 달리 연속적으로 호출할 수 없다.
37-41
const lee = { name: 'Lee' };
const kim = { name: 'Kim' };
const map = new Map([[lee, 'developer'], [kim, 'designer']]);
map.clear();
console.log(map); // Map(0) {}Map 객체의 요소를 일괄 삭제하려면 Map.prototype.clear 메서드를 사용한다.
clear 메서드는 언제나 undefined를 반환한다.
37-42
const lee = { name: 'Lee' };
const kim = { name: 'Kim' };
const map = new Map([[lee, 'developer'], [kim, 'designer']]);
map.forEach((v, k, map) => console.log(v, k, map));
/*
developer {name: "Lee"} Map(2) {
{name: "Lee"} => "developer",
{name: "Kim"} => "designer"
}
designer {name: "Kim"} Map(2) {
{name: "Lee"} => "developer",
{name: "Kim"} => "designer"
}
*/Map 객체의 요소를 순회하려면 Map.prototype.forEach 메서드를 사용한다.
배열의 forEach 메서드와 유사하게 콜백 함수와 forEach 메서드의 콜백 함수 내부에서 this로 사용될 객체를 인수로 전달한다.
이 때 콜백 함수는 3개의 인수를 전달받는다.
- 첫 번째 인수 : 현재 순회 중인 요소값
- 두 번째 인수 : 현재 순회 중인 요소키
- 세 번째 인수 : 현재 순회 중인
Map객체 자체
37-43
const lee = { name: 'Lee' };
const kim = { name: 'Kim' };
const map = new Map([[lee, 'developer'], [kim, 'designer']]);
// Map 객체는 Map.prototype의 Symbol.iterator 메서드를 상속받는 이터러블이다.
console.log(Symbol.iterator in map); // true
// 이터러블인 Map 객체는 for...of 문으로 순회할 수 있다.
for (const entry of map) {
console.log(entry); // [{name: "Lee"}, "developer"] [{name: "Kim"}, "designer"]
}
// 이터러블인 Map 객체는 스프레드 문법의 대상이 될 수 있다.
console.log([...map]);
// [[{name: "Lee"}, "developer"], [{name: "Kim"}, "designer"]]
// 이터러블인 Map 객체는 배열 디스트럭처링 할당의 대상이 될 수 있다.
const [a, b] = map;
console.log(a, b); // [{name: "Lee"}, "developer"] [{name: "Kim"}, "designer"]Map 객체는 이터러블이다.
따라서 for...of 문으로 순회할 수 있으며, 스프레드 문법과 배열 디스트럭처링 할당의 대상이 될 수 있다.
37-44
const lee = { name: 'Lee' };
const kim = { name: 'Kim' };
const map = new Map([[lee, 'developer'], [kim, 'designer']]);
// Map.prototype.keys는 Map 객체에서 요소키를 값으로 갖는 이터레이터를 반환한다.
for (const key of map.keys()) {
console.log(key); // {name: "Lee"} {name: "Kim"}
}
// Map.prototype.values는 Map 객체에서 요소값을 값으로 갖는 이터레이터를 반환한다.
for (const value of map.values()) {
console.log(value); // developer designer
}
// Map.prototype.entries는 Map 객체에서 요소키와 요소값을 값으로 갖는 이터레이터를 반환한다.
for (const entry of map.entries()) {
console.log(entry); // [{name: "Lee"}, "developer"] [{name: "Kim"}, "designer"]
}Map 객체는 Symbol.iterator 속성을 통해 이터러블하며, 동시에 이터레이터를 반환하는 메서드인 entries, keys, values 메서드를 제공합니다.
Map 메서드 |
설명 | 사용 예시 |
|---|---|---|
Map.prototype.keys |
Map 객체의 키들을 순회하는 이터레이터를 반환, 이터레이터는 키 값만 순차적으로 반환 |
map.keys() |
Map.prototype.values |
Map 객체의 값들을 순회하는 이터레이터를 반환, 이터레이터는 값만 순차적으로 반환 |
map.values() |
Map.prototype.entries |
Map 객체의 각 키-값 쌍을 순회하는 이터레이터를 반환, 이터레이터는 [key, value] 형태의 배열을 순차적으로 반환 |
map.entries() |
요소의 순서에 의미를 갖지 않지만 순회하면 추가된 순서대로 나온다. 이는 다른 이터러블의 순회와 호환성을 유지하기 위함이다.
- 공통점
- 생성자 함수로 생성, 생성자 함수에 인수 미전달시 빈 객체가 생성
setter없이getter함수만 존재하는 접근자 프로퍼티- 중복된 요소 존재 불가능 => 에러 띄우지 않고 무시
NaN과NaN은 같다고 평가- 이터러블,
for...of문 순회ㅡ스프레드 문법과배열 디스트럭처링할당가능 - 요소의 순서에 의미를 갖지 않지만 순회 시 추가된 순서대로 나옴 = 다른 이터러블의 순회와 호환성을 유지하기 위함
- 차이점
| 메서드 | Set |
Map |
비고 |
|---|---|---|---|
| 요소개수확인 | size |
size |
|
| 요소 추가 | add |
set |
연속호출가능 |
| 존재 여부 확인 | has |
has |
|
| 삭제 | delete |
delete |
Set만 연속호출가능 |
| 취득 | get |
값 자체를 저장하는 자료구조, 특정 값을 조회한다. ex) key 에 맞는 value | |
| 일괄삭제 | clear |
clear |
언제나 undefined 를 반환 |
| 요소 순회 | forEach |
forEach |