바닥코딩
Map 오브젝트 본문
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 |