자바스크립트 클로저(Closure)란 무엇일까?
클로저는 함수와 그 함수가 선언된 위치(어휘적 환경, Lexical Environment)를 하나로 묶은 개념입니다. 자바스크립트에서는 모든 함수가 클로저처럼 동작합니다.
쉽게 말해, 클로저는 함수가 호출되는 시점의 스코프가 아니라, 자신이 선언된 시점의 스코프를 기억하고 사용하는 함수입니다. 이러한 특성 덕분에 함수는 코드상 어디에서 호출되든 자신이 태어난 환경의 변수에 계속 접근할 수 있습니다.
클로저 예제 코드
아래 예제를 통해 클로저가 실제로 어떻게 동작하는지 직접 확인해 보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h2>자바스크립트 클로저 활용하기</h2>
<script>
var num = 10;
function a() {
var num = 15;
b(function () {
alert(num);
});
}
function b(f) {
var num = 30;
f();
}
a();
</script>
</body>
</html>
실행 결과 분석
위 코드를 실행하면 알림 창에 15가 표시됩니다. 왜 그럴까요?
- 전역 변수
num은 10으로 초기화됩니다. - 함수
a()내부에는 지역 변수num이 15로 선언되어 있습니다. a()는 익명 함수를b()에 인자로 전달하고,b()에서는 자신의 지역 변수num을 30으로 선언한 뒤 전달받은 함수를 실행합니다.- 그러나 이 익명 함수는
b()에서 호출되었음에도 불구하고, 자신이 선언된a()의 스코프를 기억하기 때문에num값으로 15를 참조하게 됩니다.
만약 클로저가 없고 호출된 위치의 스코프를 따른다면 결과는 30이 되었을 것입니다. 이처럼 클로저는 "함수가 어디서 호출되었는가"가 아니라 "함수가 어디서 선언되었는가"를 기준으로 스코프를 결정한다는 점이 핵심입니다.
클로저의 주요 활용 사례
클로저는 단순한 이론 개념이 아니라 실무에서 폭넓게 활용됩니다.
- 데이터 은닉(캡슐화): 외부에서 직접 접근할 수 없는 비공개 변수를 만들어 안전하게 상태를 관리할 수 있습니다.
- 함수 팩토리: 특정 값을 기억하는 새로운 함수를 동적으로 생성할 수 있습니다.
- 콜백과 이벤트 핸들러: 이전 상태를 기억해야 하는 비동기 처리나 이벤트 로직에서 특히 유용합니다.
클로저를 제대로 이해하면 스코프 체인, 실행 컨텍스트 등 자바스크립트의 근본적인 동작 방식을 더 깊이 있게 파악할 수 있습니다.