바닥코딩

Map 오브젝트 본문

JavaScript/vanilla js

Map 오브젝트

개발공부개발공부 2021. 3. 17. 13:23

 Map은 key-value 의 쌍으로 이루어져 있습니다.  Map은 해당 키와 value를 개발 단계에서 유용하게 사용하기 좋기 떄문에 유용한 개발을 위해서 Map 오브젝트의 구조와 Map에서 제공하는 함수를 보겠습니다.

Map 오브젝트 구조

let newMap = new Map([ /*Map 작성*/ 
    ["key1","value1"],
    ["key2","value2"],
    ["key3","value3"]
]);

 Map은 new Map() 를 통해 인스턴스를 생성합니다 여기서 하나 주의할점은 key:value 형식으로 작성하는 것이 아니라 ["key" ,"value"] 형태로 작성을 한다는 것입니다.  선언 하는 방법에 어려운점은 없을 것입니다. Map을 활용했을 때 좋은 경우에 대해서 알아보면  아래의 경우 정도를 볼 수 있습니다.

  •  컬랙션을 사용할 때
  •  for, while 같은 반복문을 사용할 때
  • 작성한 순서가 보장 되어야 할 때

Map 오브젝트의 메소드

 1.set - key, value 를 세팅

/*set() - key,value settings*/ 
const newMap = new Map();
newMap.set("one", 100); //set() = key, value setting
newMap.set("two", 200); //set() = key, value setting
newMap.set("three", 300); //set() = key, value setting
console.log(newMap.size);  

for(var element of newMap){
    console.log(element);
}  

2. get() - 해당 키의 value를 반환

const newMap2 = new Map();
newMap2.set("one",100);
console.log(newMap2.get("one")); // key 'one' 의 value 를 반환
console.log(newMap2.get("two")); // 값이 없음으로 undifined 출력

3. has() - 키의 존재 여부 확인

const newMap3 = new Map();
newMap3.set("one", 100);
console.log(newMap3.has("one")); //true
console.log(newMap3.has("two")); //false 

4. entries() - 이터레이터 오브젝트 생성

const newMap4 = new Map([
    ["key1", "value1"],
    ["key2", "value2"]
]);

let iteratorObj = newMap4.entries(); //이터레이터 오브젝트 생성
let result = iteratorObj.next();

console.log(iteratorObj.next());  // value 와 done(이터레이터  종료 여부 반환)
console.log(iteratorObj.next());

5. forEach() - 엘리먼트 마다 콜백 함수를 호출

const newMap5 = new Map([
    ["key1", "value1"],
    ["key2", "value2"]
]);

newMap5.forEach((value, key, map) =>{ /* forEach 요소마다 불러올 콜백 함수*/ 
    console.log(key, value);
});

6.delete() - 엘리먼트 삭제

const newMap6 = new Map([
    ["key1", "value1"],
    ["key2", "value2"]
]); 

console.log(newMap6.delete("key1")); 
/* 
    키값이 있으면 삭제하고 true 반환
    키값이 없으면 false를 반환
*/

/*clear() - 모든 key, value쌍을 지움*/

7. clear()  - 모든 key, value 의 쌍을 지움

const newMap7 = new Map([
    ["key1", "value1"],
    ["key2", "value2"]
]);

console.log(newMap7.clear()); //모든 요소 초기화

 

'JavaScript > vanilla js' 카테고리의 다른 글

Spread 연산자  (0) 2021.03.26
동기/비동기 ,callback 함수  (0) 2021.03.25
Arrow function  (0) 2021.03.17
프로토 타입  (0) 2021.03.17
클로저  (0) 2021.03.15