minstudio

Map과 Set (Key 기반 컬렉션)

Map과 Set은 ES6에 도입된 새로운 Key-Value, Key 기반 데이터 구조입니다. 기존의 Object와 Array가 가진 한계점을 극복하기 위해 만들어졌습니다.

Map은 객체와 비슷하지만, 키(Key)로 문자열뿐만 아니라 객체, 함수 등 '어떤 값'이든 사용할 수 있으며 요소의 추가된 순서를 보장합니다. Set은 배열과 비슷하지만, 중복된 값을 허용하지 않는 유일한 값들의 집합입니다.

🗺️ Map vs Set Map (사전) Key Value "name" -> "John" { id: 1 } -> "Admin" (객체도 Key 가능) 메서드: set(), get(), has() Set (집합) 1 "A" true 메서드: add(), delete(), has() (중복 불가!)
<script>
console.log("=== Map 객체 ===");
const userRoleMap = new Map();

const userObj = { name: "Alice" }; // 객체를 키로 사용할 수 있음

userRoleMap.set("admin_email", "admin@test.com"); // 문자열 키
userRoleMap.set(userObj, "Super Admin"); // 객체 키! (일반 Object에선 불가능)

console.log("userObj의 권한:", userRoleMap.get(userObj));
console.log("Map 크기:", userRoleMap.size);

console.log("\n=== Set 객체 (배열 중복 제거에 최고!) ===");
const tags = new Set();
tags.add("JavaScript");
tags.add("React");
tags.add("JavaScript"); // 중복된 값은 무시됨!

console.log("Set에 담긴 태그:", tags); 
console.log("'Vue' 태그가 있나요?", tags.has("Vue"));

// 배열 중복 제거 패턴
const rawArray = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(rawArray)];
console.log("중복 제거된 배열:", uniqueArray);
</script>
실행 결과
Map과 Set (Key 기반 컬렉션) | Minstudio