Index
① Set
② Map
Set과 Map은 ES5(ECMAScript 2015)에서 도입된 컬렉션 객체입니다. 둘 다 기존의 Array(순서 중심)나 Object(키-값 중심)로는 부족했던 상황을 깔끔하게 해결해준다.
1. Set 값만 모으는 중복 없는 바구니
- 중복 없음 : 수학의 ‘집합’처럼 동일한 값을 두 번 담으면 한 번만 남는다.
- 값만 저장: 키가 없다. 요소 자체가 곧 값이다.
- 삽입 순서 기악:
for...of,spread연산 등으로 순회할 때 추가한 순서대로 나온다. - 주요 메서드:
add,has,delete,size,clear
const basket = new Set();
basket.add("사과");
basket.add("바나나");
basket.add("사과"); // 무시! (중복)
console.log(basket.size); // 2
console.log(basket.has("바나나")); // true
for (const fruit of basket) console.log(fruit); // 사과, 바나나
🧐 Q. 언제 쓰면 좋을까?
- 배열에서 중복 제거가 필요할 때
- ‘이미 본 값인지?’ 빠르게 체크할 때
ex) 유저가 중복된 아이디로 회원가입하려는지 검사할 때
const usedIds = new Set(["jay123", "sunny01", "appletree"]);
// 새로 입력된 아이디
const newId = "jay123";
if (usedIds.has(newId)) {
console.log("이미 사용 중인 아이디입니다.");
} else {
usedIds.add(newId); // 새 아이디 저장
console.log("사용 가능한 아이디입니다.");
}
2. Map 키-값 짝궁을 자유롭게 담는 사전
- 아무 값이나 키-값 가능: 객체는 키가 문자열/심벌만 되지만, Map은 함수, 객체 NaN도 키로 쓸수 있다.
- 삽입 순서 기억:
for...of,map.forEach시 추가한 수서 유지 - 사이즈 속성:
map.size로 항목 수 즉시 확인 - 깨끗한 프로토타이핑: Object처럼
toString같은 기본 프로퍼티 충돌 걱정 없음 - 주요 메서드:
set,get,has,delete,size,clear,keys,values,entries
const phoneBook = new Map();
phoneBook.set("Jane", "010-1234-5678");
phoneBook.set({ name: "홍길동" }, "010-9999-8888"); // 객체 키도 OK
console.log(phoneBook.get("Jane")); // 010-1234-5678
console.log(phoneBook.has("Mike")); // false
for (const [person, number] of phoneBook) {
console.log(`${person} → ${number}`);
}
🧐 Q. 언제 쓰면 좋을까?
- 키가 다양하거나 동적으로 변해야 할때
ex) 객체(사용자 정보)를 키로 사용해 개인별 캐시 저장할 때
const user1 = { name: "Jay" };
const user2 = { name: "Sunny" };
const userCache = new Map();
userCache.set(user1, { lastLogin: "2025-06-07" });
userCache.set(user2, { lastLogin: "2025-06-01" });
// 나중에 다시 객체로 직접 접근 가능
console.log(userCache.get(user1)); // { lastLogin: '2025-06-07' }
- 각 키에 정확히 하나의 값만 대응시킬때 (객체 vs 속도 · 메모리 이점은 엔진마다 다르지만, 키 종류가 복잡하면 Map이 더 직관적)
ex) 학생 이름에 대한 점수 매핑
const scores = new Map();
scores.set("Jay", 95);
scores.set("Sunny", 88);
scores.set("Tom", 70);
// 점수 업데이트도 쉽게 가능
scores.set("Tom", 75); // 덮어쓰기
console.log(scores.get("Tom")); // 75