클로저(closure)란 무엇인가요?

Question

Accepted Answer

**클로저(closure)**는 함수가 자신을 둘러싼(렉시컬) 스코프의 변수들에 대한 참조와 함께 묶인 것입니다. 클로저 덕분에 내부 함수는 **외부 함수가 반환된 후에도** 외부 함수의 변수에 계속 접근할 수 있습니다. ```js function makeCounter() { let count = 0; // 클로저가 캡처하는 private 변수 return { inc: () => ++count, // 각 클로저는 자신만의 count를 "기억"한다 get: () => count, }; } const a = makeCounter(); const b = makeCounter(); // 독립적인 클로저 — 별개의 count a.inc(); a.inc(); // a.get() → 2 b.inc(); // b.get() → 1 (a는 영향받지 않음) ``` `count`는 외부에서 접근할 수 없습니다 — 오직 `inc`/`get`만 볼 수 있습니다. 이것이 클로저로 만든 **데이터 프라이버시(data privacy)**입니다. 그리고 `makeCounter()`를 호출할 때마다 새롭고 격리된 스코프가 생성됩니다. ## 고전적인 루프 버그 ```js for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 0); // 3, 3, 3 출력 — 모두 하나의 `i`를 공유 } for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 0); // 0, 1, 2 출력 — `let`은 반복마다 별개 } ``` `var`를 쓰면 모든 콜백이 **같은** `i`를 클로저로 캡처합니다(실행될 시점에는 3이 됨). `let`은 반복마다 새로운 바인딩을 생성합니다. ## 왜 중요한가 클로저는 **모듈 프라이버시**, **메모이제이션(memoization)**, **커링(currying)**, 상태를 기억하는 이벤트 핸들러/콜백을 가능하게 하며, React 훅(`useState`)이 렌더링 간에 값을 유지하는 방식 그 자체입니다.