🔒 02. 클로저 — 함수가 죽어도 기억하는 변수의 비밀

// 🐣 영철: "전역 변수 대신 이렇게 짜면 되는 건가요?" — 영수네 커뮤니티 게시글 조회수 카운터
 
function createViewCounter() {
  let count = 0; // ← 이 변수가 클로저에 "캡처"된다
 
  function increment() {
    count++;
    console.log(`조회수: ${count}`);
  }
 
  function getCount() {
    return count;
  }
 
  return { increment, getCount };
}
 
const postCounter = createViewCounter();
postCounter.increment(); // 조회수: 1
postCounter.increment(); // 조회수: 2
postCounter.increment(); // 조회수: 3
console.log(postCounter.getCount()); // 3
 
// 외부에서 count에 직접 접근 불가!
console.log(postCounter.count); // undefined — 완벽한 은닉

function outer() {
  const message = "안녕!"; // outer의 렉시컬 환경
 
  function inner() {
    // inner 함수는 생성될 때 outer의 렉시컬 환경을 [[Environment]]에 저장
    console.log(message); // 클로저를 통해 접근
  }
 
  return inner; // inner 함수 자체를 반환
}
 
const closureFunc = outer(); // outer 실행 종료 → 일반적으로 message는 사라져야 함
closureFunc(); // "안녕!" — 하지만 closureFunc이 outer의 환경을 들고 있어서 살아있음
 
// 메모리 관점:
// outer()가 종료됐지만, closureFunc([[Environment]])가 outer의 렉시컬 환경을 참조 중
// → GC(가비지 컬렉터)가 수거 불가 → message는 메모리에 살아있음

// ❌ 순진한 코드 (Naive Approach) — 전역 노출
// 🐣 영철의 초기 코드
let postLikeCount = 0;
 
function like() {
  postLikeCount++;
}
function unlike() {
  postLikeCount--;
}
 
// 문제: 누구나 postLikeCount = 9999 로 조작 가능
 
// ✅ 클로저로 데이터 은닉 (Pro Approach)
// 🦁 영호의 리팩토링
function createLikeManager(initialCount = 0) {
  let _count = initialCount; // 외부 접근 불가한 private 변수
 
  return {
    like() {
      if (_count >= 9999) return; // 비즈니스 로직도 내부에서 처리
      _count++;
    },
    unlike() {
      if (_count <= 0) return;
      _count--;
    },
    getCount() {
      return _count;
    },
  };
}
 
const likeManager = createLikeManager(42);
likeManager.like();
likeManager.like();
console.log(likeManager.getCount()); // 44
// likeManager._count 는 undefined — 완전 봉인

// 영수네 커뮤니티 — 게시글별 독립적인 상태 관리
 
function createPostManager(postId) {
  let viewCount = 0;
  let likeCount = 0;
  const comments = [];
 
  return {
    view() {
      viewCount++;
      return viewCount;
    },
    like() {
      likeCount++;
      return likeCount;
    },
    addComment(text) {
      const comment = { id: comments.length + 1, text, postId };
      comments.push(comment);
      return comment;
    },
    getSummary() {
      return { postId, viewCount, likeCount, commentCount: comments.length };
    },
  };
}
 
// 각 게시글마다 독립적인 상태
const post1 = createPostManager(1);
const post2 = createPostManager(2);
 
post1.view();
post1.view();
post1.like();
post2.view();
 
console.log(post1.getSummary()); // { postId: 1, viewCount: 2, likeCount: 1, commentCount: 0 }
console.log(post2.getSummary()); // { postId: 2, viewCount: 1, likeCount: 0, commentCount: 0 }
// post1과 post2는 서로의 상태에 전혀 영향을 주지 않음 ✅

// 영수네 커뮤니티 — 검색 필터 결과 캐싱
 
function memoize(fn) {
  const cache = new Map(); // 클로저로 캡처된 캐시
 
  return function (...args) {
    const key = JSON.stringify(args);
 
    if (cache.has(key)) {
      console.log("캐시 히트! 🎯");
      return cache.get(key);
    }
 
    const result = fn(...args);
    cache.set(key, result);
    return result;
  };
}
 
// 무거운 필터링 함수 (실제로는 복잡한 연산)
const heavyFilter = (posts, keyword) => {
  console.log(`DB 조회 중... keyword: ${keyword}`);
  return posts.filter((p) => p.title.includes(keyword));
};
 
const cachedFilter = memoize(heavyFilter);
 
const posts = [
  { id: 1, title: "클로저 완전정복" },
  { id: 2, title: "React 훅 정복" },
  { id: 3, title: "클로저 심화" },
];
 
cachedFilter(posts, "클로저"); // DB 조회 중...
cachedFilter(posts, "클로저"); // 캐시 히트! 🎯 — 재계산 없음
cachedFilter(posts, "React");  // DB 조회 중...

// 영수네 커뮤니티 — API 호출 헬퍼
 
function createApiCaller(baseURL) {
  return function (endpoint, options = {}) {
    return fetch(`${baseURL}${endpoint}`, {
      headers: {
        "Content-Type": "application/json",
        ...options.headers,
      },
      ...options,
    });
  };
}
 
// baseURL을 한 번만 설정하고 여러 API 호출에 재사용
const devApi = createApiCaller("https://dev-api.youngsu.com");
const prodApi = createApiCaller("https://api.youngsu.com");
 
// 실제 사용 — 간결하게!
devApi("/posts");            // https://dev-api.youngsu.com/posts
devApi("/users/42");         // https://dev-api.youngsu.com/users/42
prodApi("/posts");           // https://api.youngsu.com/posts

// ❌ 메모리 누수 패턴
// 🐣 영철의 코드 — 이벤트 리스너 안에서 거대한 데이터를 클로저로 캡처
 
function setupUI() {
  const hugeUserList = fetchAllUsers(); // 수만 명의 유저 데이터 (수 MB)
 
  document.getElementById("search-btn").addEventListener("click", function () {
    // hugeUserList 전체를 클로저로 참조
    const result = hugeUserList.filter(/* ... */);
    renderResult(result);
  });
 
  // setupUI가 끝난 후에도:
  // - click 이벤트 리스너가 살아있고
  // - 그 리스너가 hugeUserList를 참조하므로
  // - hugeUserList는 GC 수거 불가 → 메모리 누수
}
 
// ✅ 해결책 — 필요한 데이터만 클로저에 가둬라
function setupUI() {
  const hugeUserList = fetchAllUsers();
  const processedList = preprocessForSearch(hugeUserList); // 경량화된 데이터만 추출
  hugeUserList = null; // 원본 참조 해제 → GC 가능
 
  document.getElementById("search-btn").addEventListener("click", function () {
    const result = processedList.filter(/* ... */); // 경량 데이터만 참조
    renderResult(result);
  });
}

function makeAdder(x) {
  return function (y) {
    return x + y;
  };
}
 
const add5 = makeAdder(5);
const add10 = makeAdder(10);
 
console.log(add5(3));  // ?
console.log(add10(3)); // ?
console.log(add5(10)); // ?