✅ 클로저의 개념

클로저는 자바스크립트에서 함수가 선언될 당시의 렉시컬 환경를 기억해서, 외부 함수가 종료된 이후에도 그 변수들에 접근할 수 있는 함수를 말합니다.

예를 들어, 다음과 같은 코드에서 클로저가 만들어집니다:

function createCounter() {
  let count = 0;
  return function () {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

이 코드는 외부 함수인 createCounter는 실행이 끝났지만, 내부 함수가 count에 계속 접근할 수 있기 때문에 클로저가 형성된 것입니다.

클로저는 상태 유지가 필요한 경우에 유용합니다. 예를 들어, React의 커스텀 훅 구현이나, 이벤트 핸들러 안에서 외부 변수에 접근할 때, 또는 데이터 은닉을 위한 모듈 패턴 구현 등에 자주 활용됩니다.

🧠 클로저의 동작 원리

  1. 함수가 생성될 때, 자바스크립트는 그 함수와 함께 **자신이 선언된 렉시컬 환경(Lexical Environment)**을 함께 저장합니다.
  2. 이 렉시컬 환경은 스코프 체인(scope chain) 구조로 연결되어 있고,
  3. 클로저는 이 체인을 따라 상위 스코프의 변수에 접근합니다.

⚠️ 클로저의 특징과 주의점

특징 설명
외부 변수 기억 선언 시점의 외부 변수들을 계속 참조 가능
함수 실행 이후에도 변수 유지 일반적으로 함수 실행이 끝나면 변수는 사라지지만, 클로저는 유지
메모리 누수 가능성 있음 참조가 남아 있기 때문에, 필요 시 참조 해제 필요 (null 처리 등)

📦 실전 예제

1. 데이터 은닉

function createSecret() {
  const secret = "비밀";

  return {
    get: () => secret,
    set: (v) => console.log("변경은 안 됩니다"),
  };
}

const s = createSecret();
console.log(s.get()); // "비밀"

외부에서는 secret을 직접 접근할 수 없음 → 캡슐화