클로저 심화 — 렉시컬 환경부터 실전 패턴과 메모리 관리까지

function outer() {
  const message = '안녕하세요';

  function inner() {
    console.log(message); // outer의 변수에 접근
  }

  return inner;
}

const greeting = outer(); // outer 실행 종료
greeting(); // '안녕하세요' — outer가 끝났는데도 message에 접근 가능

function outer() {
  let count = 0;

  // inner 생성 시 [[Environment]]에 outer의 렉시컬 환경이 저장됨
  function inner() {
    count++;
    return count;
  }

  return inner;
}

inner의 렉시컬 환경
  → outer의 렉시컬 환경 (count: 0) ← [[Environment]]로 참조
    → 전역 렉시컬 환경

function createMultiplier(factor) {
  // factor를 기억하는 클로저
  return function (number) {
    return number * factor;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5));  // 10
console.log(triple(5));  // 15

function createCounter() {
  let count = 0; // 외부에서 직접 접근 불가

  return {
    increment() {
      return ++count;
    },
    decrement() {
      return --count;
    },
    getCount() {
      return count;
    }
  };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount());  // 2
console.log(counter.count);       // undefined — 직접 접근 불가

// 일반 함수
function add(a, b) {
  return a + b;
}

// 커링된 함수 — 클로저 활용
function curriedAdd(a) {
  return function (b) {
    return a + b; // a를 클로저로 기억
  };
}

const add5 = curriedAdd(5);
console.log(add5(3)); // 8
console.log(add5(7)); // 12

function setupButton(buttonId) {
  let clickCount = 0;

  document.getElementById(buttonId).addEventListener('click', () => {
    clickCount++; // 클로저로 clickCount 유지
    console.log(`${buttonId} 클릭 횟수: ${clickCount}`);
  });
}

setupButton('btn-a');
setupButton('btn-b');
// 각 버튼이 독립적인 clickCount를 가짐

for (var i = 0; i < 3; i++) {
  setTimeout(function () {
    console.log(i);
  }, 1000);
}
// 출력: 3, 3, 3

for (let i = 0; i < 3; i++) {
  setTimeout(function () {
    console.log(i);
  }, 1000);
}
// 출력: 0, 1, 2

for (var i = 0; i < 3; i++) {
  (function (j) {
    setTimeout(function () {
      console.log(j);
    }, 1000);
  })(i); // 현재 i를 j로 복사
}
// 출력: 0, 1, 2

for (var i = 0; i < 3; i++) {
  setTimeout(function (j) {
    console.log(j);
  }, 1000, i); // 세 번째 인자가 콜백의 파라미터로 전달됨
}
// 출력: 0, 1, 2

function createHeavyClosure() {
  // 큰 데이터
  const largeData = new Array(1000000).fill('데이터');

  return function () {
    // largeData를 사용하지 않지만 렉시컬 환경에 있으므로 참조됨
    console.log('hello');
  };
}

const fn = createHeavyClosure();
// largeData가 해제되지 않음 — 엔진 최적화에 따라 다를 수 있음

function setupHandler() {
  let cache = loadExpensiveData();

  const handler = function (event) {
    // cache 사용
    process(cache, event);
  };

  // 핸들러 제거 시 참조도 해제
  return {
    handler,
    cleanup() {
      cache = null; // 명시적으로 참조 해제
    }
  };
}

const { handler, cleanup } = setupHandler();
element.addEventListener('click', handler);

// 나중에 정리
element.removeEventListener('click', handler);
cleanup();

function attachHandler() {
  const element = document.getElementById('button');

  element.addEventListener('click', function () {
    // element를 클로저로 참조 — DOM 노드가 해제되지 않을 수 있음
    console.log(element.textContent);
  });
}

function debounce(fn, delay) {
  let timerId = null; // 클로저로 타이머 ID 유지

  return function (...args) {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

// 검색 입력에 디바운스 적용
const debouncedSearch = debounce((query) => {
  console.log(`검색: ${query}`);
}, 300);

function memoize(fn) {
  const cache = new Map(); // 클로저로 캐시 유지

  return function (...args) {
    const key = JSON.stringify(args);

    if (cache.has(key)) {
      return cache.get(key);
    }

    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

const expensiveCalc = memoize((n) => {
  console.log('계산 중...');
  return n * n;
});

expensiveCalc(5); // '계산 중...' → 25
expensiveCalc(5); // 캐시에서 반환 → 25

const Module = (function () {
  // private 변수와 함수
  let privateVar = 0;

  function privateMethod() {
    return privateVar++;
  }

  // public API
  return {
    increment: privateMethod,
    getValue() {
      return privateVar;
    }
  };
})();

Module.increment();
console.log(Module.getValue()); // 1
console.log(Module.privateVar); // undefined