Key, Value로 이루어진 데이터 집합인 Map 자료구조를 Javascript 및 Node.js에서 어떻게 정의하고 사용하는지 Map 객체 내장 메서드와 문법을 정리해보도록 하겠습니다.
Map 객체 정의 및 데이터 삽입
Map은 아래와 같이, new Map()으로 정의를 할 수 있습니다.
데이터를 삽입하는 방법은 2가지인데, map.set( key, value )를 통해 데이터를 저장하거나, 최초 정의 시 new Map([ [ key, value] ])와 같이 Map 생성 및 데이터 삽입을 동시에 할 수 있습니다.
var map1 = new Map();
map1.set('key1','value1');
map1.set('key2','value2');
var map2 = new Map([
['key3','value3'],
['key4','value4']
]);
Map 내장 메서드
- map.size : Key-Value쌍의 데이터 수를 리턴
- map.set( key, value ) : Key, Value 데이터 삽입
- map.get( key ) : Key값을 통해 Value 데이터 조회
- map.delete( key ) : Key값으로 해당 데이터 제거
- map.has( key ) : 해당 Key값의 데이터가 있는지 true/false 리턴
- map.clear() : 모든 데이터 제거
- map.keys() : Key로만 이루어진 Iterator 객체 리턴
- map.values() : Value로만 이루어진 Iterator 객체 리턴
- map.entries() : [ Key, Value ] 배열로 이뤄진 Iterator 객체 리턴
Map 사용 문법관련 샘플 예제
아래와 같이 jQuery를 사용하지 않고 순수 바닐라 자바스크립트를 사용한 Map 자료 구조 샘플 예제를 작성해봤습니다.
참고로 jQuery의 append 기능은 "innerHTML +="로 구현이 가능하고, Iterator 객체는 for of문으로 반복문 구현이 가능합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script>
window.onload = function(){
var map1 = new Map();
map1.set('key1','value1');
map1.set('key2','value2');
document.getElementById("mapSize").innerHTML += map1.size;
// map1.size : 2
document.getElementById("mapGet").innerHTML += map1.get("key1");
// map1.get("key1") : value1
document.getElementById("mapHas").innerHTML += map1.has("key1");
// map1.has("key1") : true
map1.delete("key1");
document.getElementById("mapDelete").innerHTML += map1.size;
// map1.delete("key1")이후 사이즈 : 1
var map2 = new Map([
['key3','value3'],
['key4','value4']
]);
for(var k of map2.keys()) document.getElementById("mapKeys").innerHTML += k + "<br>";
/* map2.keys() :
key3
key4 */
for(var v of map2.values()) document.getElementById("mapValues").innerHTML += v + "<br>";
/* map2.values() :
value3
value4 */
for(var [k, v] of map2.entries()) document.getElementById("mapEntries").innerHTML += k + " | " + v + "<br>";
/* map2.entries() :
key3 | value3
key4 | value4 */
}
</script>
</head>
<body>
<div id = "mapSize">map1.size : </div>
<div id = "mapGet">map1.get("key1") : </div>
<div id = "mapHas">map1.has("key1") : </div>
<div id = "mapDelete">map1.delete("key1")이후 사이즈 : </div>
<br>
<div id = "mapKeys">map2.keys() : <br></div>
<div id = "mapValues">map2.values() : <br></div>
<div id = "mapEntries">map2.entries() : <br></div>
</body>
</html>
참조 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
반응형
'[IT] Javascript' 카테고리의 다른 글
| [Javascript] 오픈소스 차트 및 그래프 생성 - ECharts 소개 및 예제 (0) | 2022.06.09 |
|---|---|
| 바닐라 자바스크립트(Javascript) + 타임리프(Thymeleaf) 이용 AJAX 구현 예제 (1) | 2021.12.17 |
| 순수 (바닐라) JavaScript로 AJAX Get/Post 구현 (JSON 응답/요청) (2) | 2021.12.10 |
댓글