ES6 에서 추가된 문법들(2) - Map

es6 에 새롭게 추가된 Map 객체에 대해 알아보자.

Map

map 객체는 키-값 쌍의 집합이다.

키는 단 하나만 존재할 수 있다. Object 는 key는 string 또는 symbol 만 사용할 수 있지만 Map 은 모든 값(함수, 객체 또는 원시값 등)을 사용할 수 있다.

Object 와 비슷하지만 다른점이 많다.

 

Object vs Map

	Object	Map
항목의 순서	입력한 대로 정렬되는 편이지만 항상 그런 것은 아님. 순서가 없다고 생각하는 편이 안전함.	입력한 순서대로 정렬됨
키 유형	string 혹은 symbol (number 형식으로 key 를 생성하면 자동으로 string으로 변환된다.)	모든 값이 가능함 (함수, 객체 또는 함수 등)
크기	수동으로 결정해야함	Map.size
순회	Object.keys, Object.entries 혹은 for…of, for…in 을 사용해야함	Object 의 순회 방법도 가능하며, forEach로도 순회가능순회가능

 

Map의 Methods

• Map 생성하기 - new Map()
• Map 의 값 설정하기 - Map.prototype.set()

// Map 최초 생성
const myMap = new Map();

// 데이터 입력
myMap.set(1, 'one'); // set(key, value) 로 입력한다
myMap.set(2, 'two');

console.log(myMap);
// new Map([ [ 1, "one" ], [ 2, "two" ], ])

 

Map 의 값 찾기

• Map.prototype.get() - 입력한 키에 해당하는 값을 반환, 없으면 undefined
• Map.protoType.has() - 입력한 키에 연관된 값이 Map 에 존재하는지 여부를 boolean으로 반환

// get() -> 키에 해당하는 값 반환
console.log(myMap.get(1)); // 'one'
// value 로는 찾을 수 없다
console.log(myMap.get('one')); // undefined

// has() -> 입력한 키가 존재하는지 확인
console.log(myMap.has(2)); // true
// value 가 존재하는지는 찾을 수 없다
console.log(myMap.has('two')); // false

 

Map 의 순환

• Map.keys() - 키를 포함한 반복자 반환
• Map.values() - 값들을 포함한 반복자 반환

// keys
const keyIterator = myMap.keys();

console.log(keyIterator.next().value); // 1
console.log(keyIterator.next().value); // 2

// values
const valueIterator = myMap.values();

console.log(valueIterator.next().value); // 'one'
console.log(valueIterator.next().value); // 'two'

• Map.prototype.entries() - [key, value]를 삽입한 순서대로 반복자 반환
• Map.prototype[@@iterator] - [key, value]를 삽입한 순서대로 반복자 반환

const mapIterator = myMap.entries();

console.log(mapIterator.next().value); // [1, 'one']
console.log(mapIterator.next().value); // [2, 'two']

// entries() 와 동일한 반복자를 반환한다
const mapIterator2 = myMap[Symbol.iterator]();

console.log(mapIterator2.next().value); // [1, 'one']
console.log(mapIterator2.next().value); // [2, 'two']

 

 

반복자들은 for…of 반복문에 사용된다.

const numberMap = new Map();
numberMap.set(1, 'one');
numberMap.set(2, 'two');
numberMap.set(3, 'three');

// 키를 대상으로 순회
for (let number of numberMap.keys()) {
	alert(number); // 1, 2, 3
}

// 값을 대상으로 순회
for (let amount of numberMap.values()) {
	alert(amount); // one, two, three
}

// [키, 값] 쌍을 대상으로 순회
for (let entry of numberMap) {
	alert(entry); // 1,one ...
}

 

 

Map의 데이터 삭제

• Map.prototype.delete() - key를 입력해 해당 [ key, value ] 를 삭제
• Map.prototype.clear() - Map 의 모든 [ key, value ] 를 삭제

const numberMap = new Map();
numberMap.set(1, 'one');
numberMap.set(2, 'two');
numberMap.set(3, 'three');

// delete()
numberMap.delete(2);
console.log(numberMap);
// new Map([ [ 1, "one" ], [ 3, "three" ], ])

// clear()
numberMap.clear();
console.log(numberMap);
// new Map()

 

 

Map 의 크기

Map.prototype.size 로 쉽게 크기를 구할 수 있다.

const numberMap = new Map();
numberMap.set(1, 'one');
numberMap.set(2, 'two');
numberMap.set(3, 'three');

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

// Object와 비교
const numberObj = { 1: 'one', 2: 'two', 3: 'three' };
console.log(numberObj.size); // undefined

// 키가 몇 개 있는지 확인해야 한다.
const objKeys = Object.keys(numberObj);
console.log(objKeys.length); // 3