ES6(ECMAScript 2015)에서 새롭게 도입된 Map 객체는 키(key)와 값(value)이 한 쌍을 이루는 요소들을 저장하는 컬렉션입니다. Map에서는 키와 값으로 객체뿐만 아니라 숫자, 문자열, 불리언 같은 원시 값(primitive value)도 자유롭게 사용할 수 있다는 점이 큰 장점입니다.
Map 객체의 주요 특징
- 다양한 키 타입 지원: 일반 객체(Object)와 달리 함수, 객체, NaN 등 어떤 값이든 키로 사용할 수 있습니다.
- 삽입 순서 유지: 요소가 추가된 순서를 기억하며, 반복 시에도 해당 순서대로 반환됩니다.
- 편리한 크기 확인:
size속성으로 저장된 요소의 개수를 즉시 확인할 수 있습니다. - 간단한 순회: for...of 문을 사용해 [키, 값] 형태로 손쉽게 반복 처리할 수 있습니다.
JavaScript Map 객체 예제 코드
아래 예제는 버튼을 클릭하면 Map 객체를 생성하고, 화면에 키와 값을 출력하는 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>JavaScript의 Map 객체</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 Map 객체가 생성되고 결과가 표시됩니다</h3>
<script>
let resultEle = document.querySelector(".result");
let map1 = new Map([
["name", "Rohan Sharma"],
["age", 14],
["class", 9],
]);
document.querySelector(".Btn").addEventListener("click", () => {
for (let [key, value] of map1) {
resultEle.innerHTML += key + " = " + value + "<br>";
}
});
</script>
</body>
</html>
출력 결과
위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 Map에 저장된 키와 값이 아래와 같이 화면에 출력됩니다.
코드 설명
new Map() 생성자에 2차원 배열을 전달하면 각 내부 배열의 첫 번째 요소는 키, 두 번째 요소는 값으로 설정됩니다. 이후 for...of 문에서 구조 분해 할당(destructuring)을 활용해 [key, value] 형태로 각 항목을 하나씩 꺼내어 화면에 출력하는 방식입니다. 이처럼 Map 객체는 데이터를 효율적으로 관리하고 순회하기에 매우 유용한 도구입니다.