※ 본 내용은 해당 교재를 참고하여 공부한 내용과 본인의 생각을 정리한 글입니다.
https://www.yes24.com/Product/Goods/105608999
바닐라 자바스크립트 - 예스24
실무 역량까지 한 번에 잡을 수 있는바닐라 자바스크립트 이론서자바스크립트는 이제 브라우저를 넘어 웹 애플리케이션뿐만 아니라 마이크로 컨트롤러까지 점점 사용하는 곳이 늘어나고 있다.
www.yes24.com
Map 객체는 Object와 매우 유사하다. Map 객체는 키(key)와 값(value)을 맵핑시켜서 값을 저장하며 저장된 순서대로 각 요소에 접근할 수 있다.
● set()
Map 객체에 데이터를 저장할 때는 파라미터로 키와 값을 이용하면 된다.
● get()
Map 객체에 저장된 데이터를 읽을 때는 get() 함수에 파라미터로 얻고자 하는 값의 키를 전달한다.
● has()
Map에 특정 키의 값이 저장되어 있는지 확인하려면 has() 함수를 사용한다.
● delete()
저장되어 있는 특정 데이터를 삭제하려면 delete() 함수를 사용한다.
● clear()
저장되어 있는 모든 데이터를 한 번에 삭제하려면 clear() 함수를 사용한다.
● forEach()
Map에 저장되는 모든 데이터를 읽을 때는 forEach() 함수를 사용한다. Object와 Map은 매우 유사하지만 다음과 같은 차이점이 있다.
ㆍObject의 경우 키로 문자열만 사용할 수 있지만, Map은 키로 어떤 타입이든 가능하다.
ㆍObject는 몇 개의 데이터가 담겼는지는 수동적으로 계산해야 하지만, Map은 size 속성을 통해 크기를 쉽게 알 수 있습니다.
ㆍObject는 저장된 데이터를 for-in 반복문으로 읽었을 때 데이터를 저장한 순서대로 읽는다고 보장할 수 없습니다. 하지만 Map은 데이터를 저장한 순서를 보장한다.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<script>
//Map 객체 생성
let userMap = new Map();
userMap.set("name", "홍길동");
userMap.set("email", "abc@email.com");
userMap.set("phone", "000-0000-0000");
userMap.size; // 3
userMap.get("name"); // 홍길동
userMap.has("name"); //true
userMap.delete("name"); //파라미터로 키 전달
userMap.forEach(function (item) {
console.log(item);
});
userMap.clear(); //저장되어 있는 모든 데이터가 삭제 됨.
</script>
</body>
</html>
'02. JavaScript > 01. 기본개념, 문법 (ES6)' 카테고리의 다른 글
| JavaScript_03. 내장 객체_JSON (0) | 2023.11.28 |
|---|---|
| JavaScript_03. 내장 객체_Math (0) | 2023.11.28 |
| JavaScript_03. 내장 객체_Set (0) | 2023.11.28 |
| JavaScript_03. 내장 객체_Date (0) | 2023.11.28 |
| JavaScript_03. 내장 객체_Array (0) | 2023.11.28 |
