[Javascript] Map 사용 방법 (ES6)

Javascript의 ES6 이상 버전에서는 여러 가지 편리한 기능과 함수들이 다수 등장했습니다. 이전 포스팅에서 언급한 Spread 연산자도 그 한 부분입니다.

이번 포스팅에서는 map에 대해서 알아보고 사용을 해보도록 하겠습니다.

---

Javascirpt Map

Javascript에서 Map은 Object과 유사한 부분을 가지고 있습니다. 모두 key와 value의 형태로 데이터를 저장한다는 것입니다. 다만 Map의 키는 문자열뿐만 아니라 함수 혹은 다른 데이터 타입도 키로 사용할 수 있습니다.

 

Javascript의 Map을 사용하는 방법은 다음과 같습니다.

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

새로운 Object를 변수에 대입시킬때처럼 new 키워드를 이용해서 Map을 사용합니다. 최초에는 비어있는 Map이 반환됩니다.

---

Javascript Map 요소 추가

Map을 생성했다면 Map 내부에 들어갈 요소를 추가해보도록 하겠습니다. 추가하는 함수는 set() 함수입니다.

let map = new Map();

map.set('first', {name:'koonsland'});
console.log(map); // Map(1) {"first" => {…}}

Map에 요소를 추가할 때에는 반드시 key, value 형태로 넣어주셔야 합니다. 이렇게 넣은 Map 데이터는 'first'라는 키로 접근했을 때 {name:'koonsland'}를 반환합니다.

---

Javascript Map 요소 확인

위에서 Map의 set() 함수를 이용해서 데이터를 넣었다면 정말 이 데이터가 있는지 함수를 이용해서 확인해 볼 수 있습니다. 이 함수의 이름은 has()입니다.

let map = new Map();

map.set('first', {name:'koonsland'});
console.log(map.has('first')); // true

has() 함수의 결과는 true 혹은 false로 값을 반환합니다. 값이 있으면 true, 없으면 false입니다.

---

Javascript Map 요소 접근

데이터를 넣고 정상적으로 들어갔는지 확인했다면 키를 이용해서 데이터를 가져올 수 있습니다. 함수는 get()입니다.

let map = new Map();

map.set('first', {name:'koonsland'});
console.log(map.get('first')); // {name: "koonsland"}

get() 함수로 접근하면 저장해놓은 Obejct를 가져올 수 있습니다.

---

Javascript Map 요소 삭제

Map에 넣은 데이터를 삭제하는 방법을 알아보겠습니다. 함수는 delete()입니다.

let map = new Map();

map.set('first', {name:'koonsland'});
console.log(map.get('first')); // {name: "koonsland"}

map.delete('first');
console.log(map); // Map(0)

삭제하기 위한 방법도 다른 함수들과 비슷합니다. delete() 함수를 사용하며 key 값을 parameter로 넘겨주시면 내부에서 key를 찾아서 삭제합니다.

---

Javascript Map 크기 확인

Map에 넣은 데이터들이 몇 개가 있는지 확인이 필요할 때가 있습니다. 이때는 size를 이용합니다.

let map = new Map();

map.set('first', {name:'koonsland'});
console.log(map.get('first')); // {name: "koonsland"}

console.log(map.size); // 1

size는 함수가 아닙니다. 데이터를 넣을 때마다 내부에서 계산하여 size라는 내부 변수에 크기를 저장합니다.

---

이 외에도 Map은 반복문과 함께 다양하게 사용이 가능합니다. Map의 기본적인 내용은 Java에서 사용하는 Map, HashMap과 비슷합니다. 도움이 되셨으면 합니다. 이상입니다.