JavaScript Closures Explained Simply

Context

JavaScript 개발자들은 클로저를 "렉시컬 스코프에 접근하는 함수"라는 추상적 정의로 배우면서 개념을 회피하거나 단순 암기한다. 특히 비동기 작업(setTimeout, 이벤트 리스너)에서 변수 값이 예상과 다르게 동작하는 버그를 반복적으로 마주친다.

Technical Solution

• 클로저의 본질을 "함수가 생성된 위치의 변수를 기억하는 메커니즘"으로 재정의: 실행 시점이 아닌 선언 시점의 렉시컬 스코프 참조
• 반환된 함수가 외부 함수의 변수에 접근 가능함을 구체적 코드 예제로 입증: outer() 함수 실행 완료 후에도 inner() 함수가 name 변수 접근
• 각 클로저 인스턴스는 독립적인 메모리 공간을 보유함을 실증: createClickTracker() 호출 2회 시 별도의 count 변수 생성으로 값이 증가 추적 유지
• var 루프에서 발생하는 클로저 버그 식별: 모든 콜백이 동일한 i 변수를 참조하여 최종값 4만 3번 출력되는 현상 재현
• let 키워드 도입으로 루프 반복마다 새로운 블록 스코프 생성하는 해결방안 제시: 동일한 코드 구조에서 var 대신 let 사용으로 정상 동작(Order 1, 2, 3 출력)

Key Takeaway

클로저는 이론적 개념이 아닌 JavaScript 런타임의 스코프 체인 메커니즘이므로, React hooks, 이벤트 리스너, 타이머, 상태 관리 코드에서 변수 참조 의도를 명확히 할 때 "이 함수는 무엇을 기억하는가"라는 질문이 버그 예방의 핵심이다.