Map

Map의 등장

ES6 이전에는 key-value 값을 위해 일반적인 Object 를 사용해왔다. 하지만 다른 몇가지 불편한 점이 존재했다.

1. 프로토타입 체인 발생 여부
2. 객체 안에 프로퍼티의 수를 쉽게 알아내기 힘듬
3. 객체는 프로퍼티 순서를 보장해주지 않음
4. 키는 반드시 문자열과 심볼만 사용해야 함

위 4번의 경우 이전 포스팅의 Iterator & Iterable 에서 자세하게 알아봤었다.

Map의 특징

• Map 객체는 데이터를 수집하여 활용하기 위한 객체
• 값의 고유한 식별정보인 키와 값을 함께 저장
• 외부에서 키를 사용하여 원하는 값을 추가, 삭제, 검색
• 데이터 타입에 제한이 없다(Number 가능)

Object와의 비교

• Map 은 데이터를 수집하기 위한 다양한 메서드가 존재
• 일반객체는 키로 문자열만 사용가능하지만 Map은 제한이 없음
• 내부적으로 해시테이블을 활용하기 때문에 검색속도가 빠름
• 이터러블하고, for - of 를 통해 순회할 수 있음
• 데이터 갯수를 size 를 통해 가져올 수 있음

Example code

생성

const map = new Map();
console.log(map) // Map {}

const userId = new Map([['doum','asdf123'],['gildong','qwer321']]);
console.log(userId) // Map(2) {"doum" => "asdf123", "gildong" => "qwer321"}

제너레이터 활용

function* makeUserId() {
  yield ['doum','asdf123'];
  yield ['gildong','qwer321'];
}  

const userIds = makeUserId();
const userId = new Map(userIds);
console.log(userId); // Map(2) {"doum" => "asdf123", "gildong" => "qwer321"}

위와 같이 Generator 로 Array 를 Map 으로 구현할 수 있음

데이터 갯수구하기

console.log(userId.size); // 2

CRUD API

• set(key,value) 메소드를 사용해서 데이터를 추가할 수 있다.
• get(key) 메소드를 사용해 데이터를 읽을 수 있다.
• has(key) 메소드를 사용해 데이터가 있는지 확인 가능하다.
• delete(key) 메소드를 사용해 데이터를 삭제할 수 있다.
• clear() 메소드를 사용하면 모든 데이터를 삭제할 수 있다.

userId.set("Jane","jane123");
console.log(userId); // Map(3) {"doum" => "asdf123", "gildong" => "qwer321", "Jane" => "jane123"}

console.log(userId.get("Jane")); // 'jane123'

console.log(userId.has("Jane")); //true

userId.delete("Jane");
console.log(userId);// Map(2) {"doum" => "asdf123", "gildong" => "qwer321"}

userId.clear();

열거

키를 열거하고 싶을 때는 keys() 메소드를 사용
값을 열거하고 싶을 때는 values() 메소드를 사용
데이터를 열거하고 싶을 때는 entries() 메소드를 사용

const iter = userId.entries();
for(let [key, value] of iter) console.log(key, value);

forEach 메소드를 사용해서 콜백함수를 모든 데이터에 적용할 수 있다. 콜백함수의 인수는 다음과 같다.
value : 현재 처리하는 데이터 값
key : 현재 처리하는 데이터 키
map : 처리 중인 Map 객체

userId.forEach((value,key,map) => {
	console.log(`${key} => ${value}`)