자바스크립트에 대해 공부하다 보면 클로저에 대해 한 번쯤 들어본 경험이 있을 것입니다. 클로저는 함수형 프로그래밍 언어에서 등장하는 중요한 특성입니다. 클로저에 대해 알기 전, 렉시컬 스코프와 함수 객체의 내부 슬롯인 [[Environment]]의 동작에 대해 알아야 합니다. 지금부터, 렉시컬 스코프와 [[Environment]] 슬롯에 대해 보고 나서 클로저에 대해 알아보도록 하겠습니다.

렉시컬 스코프와 [[Environment]] 슬롯

자바스크립트 엔진이 함수 정의 위치에 따라 상위 스코프를 정하는 것을 렉시컬 스코프라고 합니다. 함수의 상위 스코프를 정하는 것은 렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 저장한 참조 값을 결정하는 것과 동일한 작업으로 함수 정의가 평가되는 시점에 정의된 환경(위치)이 상위 스코프로 결정됩니다.

함수가 선언되는 위치와 호출되는 위치가 다를 수 있으므로 렉시컬 스코프를 위해서 상위 스코프를 기억해야 합니다. 함수는 상위 스코프 기억을 위해 내부 슬롯 [[Environment]]에 상위 스코프 참조(함수가 정의된 위치)를 저장합니다. 이때 저장된 값은 함수가 호출되었을 때 생성될 함수 렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 저장될 값이기도 합니다.

클로저와 렉시컬 환경

const x = 1;

function outer(){
	const x = 10;
	const inner = function() { console.log(x); };
	return inner;
}

const innerFunc = outer();
innerFunc();

위 코드의 실행 결과는 무엇일까요? 정답은 바로 10입니다!

outer 함수의 실행은 inner 함수를 반환하고 종료하기 때문에 outer 함수의 실행 컨텍스트와 x 변수는 사라졌다고 생각할 수 있지만 inner 함수의 내부 슬롯 [[Environment]]에 저장된 상위 스코프 참조로 인해 outer 함수의 렉시컬 환경은 남아있습니다.

이처럼 외부 함수보다 중첩 함수가 더 오래 남아있고 외부 함수의 변수를 참조하는 것을 클로저라고 합니다.

클로저는 중첩 함수가 상위 스코프의 식별자를 참조하고 있고 중첩 함수가 외부 함수보다 더 오래 유지되는 경우에만 한정하는 것이 일반적입니다. 또한, 클로저에 의해 참조되는 상위 스코프의 변수를 자유 변수라고 부릅니다.

자바스크립트 엔진은 클로저가 참조하고 있는 식별자만 기억하고 나머지는 가비지 컬렉션을 통해 메모리 점유를 하지 않도록 처리합니다. 이를 통해 메모리 누수를 줄입니다.

클로저는 자바스크립트에서 중요 기능으로 클로저를 통해 효율적인 코드 작성을 할 수 있습니다.

참고

이웅모, ⌈모던 자바스크립트 - Deep Dive⌋, 2020, 24_클로저(p.388 - 401)