[javascript] 자바스크립트 es6 map

 

es6에서 우리는 key-value쌍을 저장하는 Maps라는 데이터 구조체를 사용할 수 있게 되었다. 우리는 어떤 객체든 key 또는 value로 저장할 수 있다.

 

Maps를 사용하기 이전에는 키 값은 string만 사용 가능하지만 value는 무엇이든 들어갈 수 있었다.

Maps를 사용하는 것은 간단하다. Maps는 아래 코드와 같이 정의할 수 있다.

 

const superHero = new Map();
superHero.set('Superman', 'Clark Kent');
superHero.set('Batman', 'Bruce Wayne');

 

하지만 set을 사용하여 키와 벨류 값을 넣는 대신에 nested array를 사용하여 각 배열의 첫번째 값을 key에 두번째 값을 value에 매칭시킬 수 있다.

 

const heroList = [
  ['Superman', 'Clark Kent'],
  ['Batman', 'Bruce Wayne'],
  ['Wonder Woman', 'Diana Prince'],
  ['Green Lantern', 'Hal Jordan'],
  ['Aquaman', 'Arther Curry'],
  ['Flash', 'Barry Allen'],
  ['Green Arrow', 'Oliver Queen']
]
let justiceLeague = new Map(heroList);
console.log(justiceLeague)

 

만약 set으로 매칭시킨 key 값이 중복되면 나중에 들어온 value가 먼저 들어온 것을 오버라이딩한다.

 

superHero.set('Batman', 'Dick Grayson');

console.log(superHero.get('Batman')); //"Dick Grayson"

 

위 코드를 실행하면 콘솔에서 리스트와 같이 정렬된 엔트리들을 볼 수 있다.

 

superHero.size; // 2
superHero.get('Superman'); // 'Clark Kent'
superHero.get('Flash'); // undefined
superHero.delete('Superman');

 

get()은 함수 내에 해당 key가 있을 경우 그 키와 매칭되는 value 를 반환한다. delete()는 해당하는 key-value를 지워주지만 만약 모든 엔트리를 삭제하고 싶다면 clear()를 사용하면 된다.

Map의 엔트리들은 for...of 루프를 통해 불러올 수 있다.

 

for (let [key,value] of superHero){
  console.log(`${key} - ${value}`)

 

아니면 더 간단한 방법으로 다음 코드를 사용할 수 있다.

 

for (let [key, value] of superHero.entries()) {
  console.log(`${key} - ${value}`);
}

 

객체와 맵은 여러가지 다른 부분이 존재한다. 앞서 설명햇듯 객체의 key에는 오직 string만 올 수 있다. 또한 맵의 크기는 size를 통해 알 수 있었지만 객체에선 그렇지 않다.

 

예를 들어 superHero.set(NaN, 'Flash') 라는 코드를 작성했을 때 console.log(superHero.get(NaN)); 을 시도한다면 Flash라는 값을 받을 수 있을 것이다.

 

---

Maps에 대해서 공부해 보았는데 아직 어디서 쓰일지는 잘 모르겠다.