키 컬렉션(Keyed Collections)은 인덱스가 아닌 키(key)를 기준으로 요소가 정렬되는 자료 구조입니다. 본질적으로 연관(associative) 방식으로 동작하며, JavaScript에서는 Map과 Set 객체가 대표적인 키 컬렉션에 해당합니다. 두 객체 모두 요소가 삽입된 순서대로 순회(iterate)할 수 있다는 공통점이 있습니다.
Map과 Set의 특징
Map 객체
Map은 키-값 쌍을 저장하는 컬렉션입니다. 일반 객체와 달리 키로 문자열뿐 아니라 객체, 함수 등 어떤 타입의 값도 사용할 수 있으며, 저장된 요소의 개수를 size 속성으로 간편하게 확인할 수 있습니다.
Set 객체
Set은 중복 없는 고유한 값들만 저장하는 컬렉션입니다. 값의 존재 여부를 빠르게 확인해야 할 때 유용하며, 배열에서 중복 요소를 제거하는 용도로도 널리 활용됩니다.
예제 코드
다음은 JavaScript에서 객체의 키와 값을 순회하며 화면에 출력하는 전체 예제 코드입니다.
<!DOCTYPE html>
<html lang="en">
<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: 20px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>Keyed collections in JavaScript</h1>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to create and display the object</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
BtnEle.addEventListener("click", () => {
let obj = {
name:'Rohan',
age:22,
occupation:'Student',
};
for(i in obj){
resEle.innerHTML += `key = ${i} : value = ${obj[i]} <br>`;
}
});
</script>
</body>
</html>
실행 결과
페이지를 처음 열었을 때의 초기 화면은 아래와 같습니다.
'CLICK HERE' 버튼을 클릭하면 객체의 각 키와 값이 아래와 같이 화면에 출력됩니다.
