🗃️ 12. Map, Set, WeakMap — '그냥 객체'를 쓰면 안 되는 결정적 순간들

// 일반 객체의 한계
 
const cache = {};
cache[1] = "게시글 1";
cache[2] = "게시글 2";
 
// 문제 1: 숫자 키가 문자열로 변환
console.log(Object.keys(cache)); // ["1", "2"] — 숫자가 문자열이 됨
 
// 문제 2: 프로토타입 속성과 충돌 가능
const dangerousKey = "constructor"; // Object.prototype.constructor와 충돌!
cache[dangerousKey] = "위험";
 
// 문제 3: 크기 조회 불편
const size = Object.keys(cache).length; // 매번 배열 생성 → 비효율
 
// 문제 4: 객체를 키로 쓸 수 없음
const userObj = { id: 42 };
cache[userObj] = "데이터"; // cache["[object Object]"] — 모든 객체가 같은 키!

// Map 기본 사용
const userCache = new Map();
 
// 추가
userCache.set(42, { name: "영철", role: "junior" }); // 숫자 키
userCache.set("영호", { role: "lead" });              // 문자열 키
const keyObj = { type: "special" };
userCache.set(keyObj, "특수 데이터");                 // 객체 키
 
// 조회
userCache.get(42);     // { name: "영철", role: "junior" }
userCache.get("영호");  // { role: "lead" }
userCache.get(keyObj); // "특수 데이터"
userCache.get(43);     // undefined (없는 키)
 
// 확인
userCache.has(42);   // true
userCache.has(999);  // false
userCache.size;      // 3
 
// 삭제
userCache.delete(42); // true (삭제 성공)
 
// 전체 순회 (삽입 순서 보장)
for (const [key, value] of userCache) {
  console.log(key, "→", value);
}
 
// 변환
const keysArr = [...userCache.keys()];   // 키 배열
const valsArr = [...userCache.values()]; // 값 배열
const entries = [...userCache.entries()]; // [key, value] 배열
 
// 객체 → Map 변환
const obj = { a: 1, b: 2 };
const map = new Map(Object.entries(obj));
 
// Map → 객체 변환
const backToObj = Object.fromEntries(map);

// 영수네 커뮤니티 — 요청 캐싱
 
class PostCache {
  #cache = new Map();
  #maxSize;
  #ttl; // Time To Live (ms)
 
  constructor({ maxSize = 100, ttl = 5 * 60 * 1000 } = {}) {
    this.#maxSize = maxSize;
    this.#ttl = ttl;
  }
 
  set(postId, data) {
    // 최대 크기 초과 시 가장 오래된 항목 제거 (LRU 간이 구현)
    if (this.#cache.size >= this.#maxSize) {
      const firstKey = this.#cache.keys().next().value;
      this.#cache.delete(firstKey);
    }
 
    this.#cache.set(postId, {
      data,
      expireAt: Date.now() + this.#ttl,
    });
  }
 
  get(postId) {
    const entry = this.#cache.get(postId);
    if (!entry) return null;
 
    if (Date.now() > entry.expireAt) {
      this.#cache.delete(postId); // TTL 만료
      return null;
    }
 
    return entry.data;
  }
 
  get size() {
    return this.#cache.size;
  }
}
 
const postCache = new PostCache({ maxSize: 50, ttl: 3 * 60 * 1000 });
 
async function getPost(postId) {
  const cached = postCache.get(postId);
  if (cached) return cached;
 
  const post = await fetchPost(postId);
  postCache.set(postId, post);
  return post;
}

// 기본 사용
const tagSet = new Set();
tagSet.add("javascript");
tagSet.add("react");
tagSet.add("javascript"); // 중복 — 무시됨
tagSet.add("css");
 
tagSet.size;                    // 3 (중복 제외)
tagSet.has("react");            // true — O(1)
tagSet.has("python");           // false — O(1)
tagSet.delete("css");           // true
 
// 배열로부터 Set 생성 (중복 제거)
const tags = ["js", "react", "js", "css", "react", "ts"];
const uniqueTags = new Set(tags);
// Set { "js", "react", "css", "ts" }
 
// Set → 배열 변환
const uniqueTagsArr = [...uniqueTags]; // ["js", "react", "css", "ts"]
// 또는
const uniqueTagsArr2 = Array.from(uniqueTags);
 
// 가장 짧은 중복 제거 패턴
const unique = [...new Set(arr)];

// 영수네 커뮤니티 — 실무 Set 활용
 
// 1. 방문한 게시글 추적 (O(1) 확인)
const visitedPostIds = new Set();
 
function markAsVisited(postId) {
  visitedPostIds.add(postId);
}
 
function isVisited(postId) {
  return visitedPostIds.has(postId); // O(1) — 배열의 includes()보다 훨씬 빠름
}
// 배열.includes()는 O(n), Set.has()는 O(1) — 규모가 클수록 차이가 극명
 
// 2. 선택된 항목 관리 (체크박스 UI)
const selectedPostIds = new Set();
 
function toggleSelect(postId) {
  if (selectedPostIds.has(postId)) {
    selectedPostIds.delete(postId);
  } else {
    selectedPostIds.add(postId);
  }
}
 
const isSelected = (postId) => selectedPostIds.has(postId);
const selectedCount = selectedPostIds.size;
const selectedArray = [...selectedPostIds]; // API 요청 시 배열로 변환
 
// 3. 집합 연산
const followingSet = new Set([1, 2, 3, 4]); // 내가 팔로우하는 유저
const followerSet = new Set([2, 3, 5, 6]);  // 나를 팔로우하는 유저
 
// 교집합 (서로 팔로우)
const mutualFollowers = new Set(
  [...followingSet].filter((id) => followerSet.has(id))
); // Set { 2, 3 }
 
// 차집합 (내가 팔로우하는데 나는 안 팔로우하는)
const notFollowingBack = new Set(
  [...followingSet].filter((id) => !followerSet.has(id))
); // Set { 1, 4 }
 
// 합집합
const allUsers = new Set([...followingSet, ...followerSet]);
// Set { 1, 2, 3, 4, 5, 6 }

// WeakMap의 핵심 특성:
// 1. 키는 반드시 객체
// 2. 키가 GC되면 값도 자동 제거 (약한 참조)
// 3. 이터러블하지 않음 (.keys(), .values(), .size 없음)
// 4. 메모리 누수 방지에 최적
 
// 실무 패턴 1: DOM 요소에 메타데이터 연결
const domMetadata = new WeakMap();
 
function trackElement(element) {
  domMetadata.set(element, {
    clickCount: 0,
    lastInteracted: null,
    postId: element.dataset.postId,
  });
}
 
function onElementClick(element) {
  const meta = domMetadata.get(element);
  if (meta) {
    meta.clickCount++;
    meta.lastInteracted = new Date();
  }
}
 
// element가 DOM에서 제거되면 WeakMap의 항목도 자동 GC
// 일반 Map을 쓰면 element를 명시적으로 delete해야 했음
 
// 실무 패턴 2: 인스턴스별 private 데이터 저장 (ES2022 # 이전 방식)
const _privateData = new WeakMap();
 
class UserSession {
  constructor(userId, token) {
    // 외부에서 접근 불가한 private 데이터
    _privateData.set(this, { userId, token, loginAt: new Date() });
  }
 
  get userId() {
    return _privateData.get(this).userId;
  }
 
  isTokenValid() {
    const { token } = _privateData.get(this);
    return validateToken(token);
  }
}
 
const session = new UserSession(42, "secret-token");
session.userId; // 42 (getter로 접근)
_privateData.get(session); // 외부에서 이렇게 직접 접근은 가능하지만 설계상 막음
// session이 GC되면 _privateData 항목도 자동 제거 → 메모리 누수 없음

// ✅ Set을 사용한 좋아요 관리
class LikeManager {
  #likedPostIds = new Set();
 
  toggle(postId) {
    if (this.#likedPostIds.has(postId)) {
      this.#likedPostIds.delete(postId);
      return false; // 좋아요 취소
    } else {
      this.#likedPostIds.add(postId);
      return true; // 좋아요
    }
  }
 
  isLiked(postId) {
    return this.#likedPostIds.has(postId); // O(1)
  }
 
  getLikedIds() {
    return [...this.#likedPostIds]; // 배열로 변환 (API 요청 등)
  }
 
  get count() {
    return this.#likedPostIds.size;
  }
}