자바스크립트 클로저 완전 정복

클로저(Closure)는 자바스크립트에서 가장 중요하고 강력한 개념 중 하나입니다.

클로저란?

클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합입니다.

function outer() {
  const message = 'Hello, Closure!'

  function inner() {
    console.log(message) // 외부 함수의 변수에 접근
  }

  return inner
}

const greet = outer()
greet() // "Hello, Closure!"

왜 클로저가 만들어지는가?

자바스크립트 엔진은 함수를 생성할 때, 그 함수가 선언된 스코프의 참조를 함수 객체에 저장합니다.

개념	설명
렉시컬 스코프	함수가 정의된 위치 기준으로 스코프 결정
실행 컨텍스트	함수가 호출될 때 생성되는 환경
클로저	외부 함수가 종료된 후에도 내부 함수가 외부 변수에 접근 가능

실전 활용 예시

1. 데이터 캡슐화

function createCounter() {
  let count = 0

  return {
    increment() { count++ },
    decrement() { count-- },
    value() { return count },
  }
}

const counter = createCounter()
counter.increment()
counter.increment()
console.log(counter.value()) // 2

2. 함수 팩토리

function multiply(factor) {
  return (number) => number * factor
}

const double = multiply(2)
const triple = multiply(3)

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

주의사항

반복문에서 클로저를 잘못 사용하면 의도치 않은 동작이 발생할 수 있습니다.

// 잘못된 예 (var 사용)
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000) // 3, 3, 3
}

// 올바른 예 (let 사용)
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000) // 0, 1, 2
}

정리

클로저는 자바스크립트의 핵심 메커니즘으로, 데이터 은닉, 팩토리 패턴, 메모이제이션 등 다양한 패턴의 기반이 됩니다.