01 · Concept

클로저 (Closure)

클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합입니다. 내부 함수가 외부 함수의 변수를 기억하는 현상입니다.

JavaScript에서 함수는 자신이 생성된 시점의 스코프를 기억합니다. 외부 함수가 종료된 후에도 내부 함수는 외부 함수의 변수에 접근할 수 있습니다. 이것이 클로저입니다. React의 useState, useEffect 등 훅도 내부적으로 클로저를 활용합니다.

02 · Interactive Demo

스코프 체인과 클로저 시각화

각 예제를 선택하고 실행하여 클로저가 어떻게 외부 변수를 기억하는지 확인하세요.

function createCounter() {
  let count = 0;        // 외부 함수의 지역 변수
  return function() {   // 클로저: count를 기억
    count++;
    return count;
  };
}

const counter = createCounter();
counter(); // 1
counter(); // 2
counter(); // 3
Scope Chain
Global Scope
counter = ƒ (closure)
createCounter Scope
count = 0
Inner Function (Closure)
[[Scope]] = → count
03 · Code Example

코드 예시

실제 코드로 동작 원리를 확인하세요.

function outer() {
  const message = 'Hello';  // 외부 함수의 변수

  function inner() {
    console.log(message);   // 클로저: 외부 변수 참조
  }

  return inner;
}

const fn = outer();
fn(); // 'Hello' — outer()는 이미 종료되었지만
      // inner()가 message를 기억하고 있음
04 · Interview Point

면접 핵심 질문

클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합입니다. 내부 함수가 외부 함수의 변수에 접근할 수 있는 것을 의미합니다. 외부 함수의 실행이 끝나더라도 내부 함수가 외부 함수의 변수를 기억하고 접근할 수 있습니다. 이는 JavaScript의 렉시컬 스코핑 규칙에 의해 가능합니다.
1. 데이터 캡슐화/프라이빗 변수 — 모듈 패턴에서 외부 접근을 차단 2. 팩토리 함수 — 설정을 기억하는 함수 생성 (커링, partial application) 3. 이벤트 핸들러 — 콜백에서 외부 상태 참조 4. 메모이제이션 — 이전 계산 결과를 캐싱 5. React의 useState, useEffect 등 훅도 내부적으로 클로저를 활용합니다.
클로저가 외부 변수를 참조하고 있으면, 해당 변수는 가비지 컬렉션의 대상이 되지 않습니다. 클로저가 더 이상 필요하지 않은데도 참조를 유지하면 메모리 누수가 발생할 수 있습니다.

예방법: 1. 불필요한 클로저 참조를 null로 해제 2. 이벤트 리스너 등록 시 반드시 해제 처리 3. WeakRef나 WeakMap 활용 검토