클로저(Closure)란?

클로저는 함수가 선언될 때의 렉시컬 환경(Lexical Environment)을 기억하는 기능이다. 쉽게 말해, 함수 내부에서 외부 함수의 변수에 접근할 수 있는 기능을 의미한다.

🧱 기본 구조 이해하기

function outer() {
  let count = 0;

  return function inner() {
    count++;
    console.log(count);
  };
}

const counter = outer();
counter(); // 1
counter(); // 2
  • inner 함수는 outer 함수의 count 변수에 계속 접근 가능하다.
  • outer는 이미 실행이 끝났지만, count는 inner 함수 내부에서 살아있다.

🎯 클로저의 주요 특징

  1. 함수 선언 당시의 환경을 기억함
  2. 외부 함수의 지역 변수에 접근 가능
  3. 메모리 누수의 원인이 되기도 함 (주의 필요)

⚙️ 클로저는 어디에 쓰일까?

✅ 상태 유지

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

const myCounter = createCounter();
myCounter(); // 1
myCounter(); // 2

✅ 정보 은닉

function secretHolder(secret) {
  return {
    getSecret: () => secret
  };
}

const holder = secretHolder("orangee");
console.log(holder.getSecret()); // "orangee"

✅ 이벤트 핸들러에서 활용

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

// 해결 방법 (클로저 활용)
for (var i = 0; i < 3; i++) {
  (function (index) {
    setTimeout(function () {
      console.log(index); // 0, 1, 2
    }, 100);
  })(i);
}

✅ 정리

  • 클로저는 자바스크립트의 함수형 프로그래밍 핵심 개념
  • 함수가 외부 변수에 접근할 수 있도록 해주는 메커니즘
  • 상태 유지, 정보 은닉, 이벤트 핸들링 등에 매우 유용