for문 블록 레벨 스코프 안에 정의된 함수가 있는 경우, 이 함수의 상위 스코프는 for 문의 코드 블록이 생성한 렉시컬 환경이다.

이때, 함수의 상위 스코프는 for문 코드 블록이 반복해서 실행될 때마다 식별자의 값을 유지해야 한다. 이를 위해 for 문의 코드 블록이 반복해서 실행될 때마다 독립적인 렉시컬 환경을 생성하여 식별자의 값을 유지한다.

<aside> 💡

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

</aside>

렉시컬 스코프

<aside> 💡

자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라 한다.

</aside>

13장 스코프 참고

const x = 1;

function outerFunc() {
	const x = 10;
	
	function innerFunc() {
		console.log(x); // 10
	}
	
	innerFunct();
}

outerFunc();

const x = 1;

function outerFunc() {
	const x = 10;
	
	innerFunc();
}

function innerFunc() {
	console.log(x); // 1
}

outerFunc();

왼쪽의 중첩함수 innerFunc는 outerFunc의 내부에 정의되어 outerFunc의 스코프에 있다. 따라서 innerFunc 내부에서 외부함수의 변수에 접근할 수 있다.

하지만 오른쪽의 innerFunc는 함수의 내부에 정의되지 않아 outerFunc의 변수에 접근할 수 없다.

이런 현상이 발생하는 이유가 JS가 렉시컬 스코프를 따르는 프로그래밍 언어이기 때문이다.

함수 객체의 내부 슬롯 [[Environment]]

렉시컬 스코프를 위헤서는 호출되는 환경과 별도로 자신이 정의된 환경, 즉 상위 스코프를 기억해야 한다. 이를 위해 함수는 내부 슬롯 [[Environment]]에 자신이 정의된 환경, 즉 상위 스코프의 참조를 저장한다. 함수가 존재하는 한, 이 상위 스코프를 저장해 기억하여 필요시 상위 스코프를 탐색한다.

클로저와 렉시컬 환경

const x = 1;

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

// outer 함수를 호출하면 중첩 함수 inner를 반환한다.
// 그리고 outer 함수의 실행 컨텍스트는 실행 컨텍스트 스택에서 팝 되어 제거된다.
const innerFunc = outer(); // ③
innerFunc(); // ④ 10

outer 함수를 호출(③)하면 outer 함수는 중첩 함수 inner를 반환하고 생명 주기(life cycle)를 마감한다. 즉, outer 함수의 실행이 종료되면 outer 함수의 실행 컨텍스트는 실행 컨텍스트 스택에서 제거된다.

이때 outer 함수의 지역 변수 x와 변수 값 10을 저장하고 있던 outer 함수의 실행 컨텍스트가 제거되었으므로 outer 함수의 지역 변수 x 또한 생명 주기를 마감한다. 따라서 outer 함수의 지역 변수 x는 더는 유효하지 않게 되어 x 변수에 접근할 수 있는 방법은 달리 없어 보인다.

그러나 위 코드의 실행 결과(④)는 outer 함수의 지역 변수 x의 값인 10이다. 이미 생명 주기가 종료되어 실행 컨텍스트 스택에서 제거된 outer 함수의 지역 변수 x가 다시 부활이라도 한 듯이 동작하고 있다.

이처럼 외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있다. 이러한 중첩 함수를 **클로저(closure)**라고 부른다.

함수는 렉시컬 스코프를 따르기 때문에 어디서 호출하든 상위 스코프의 식별자를 참조할 수 있다.

위 예제에서 inner 함수는 평가될 때 자신이 정의된 위치에 의해 결정된 상위 스코프를 [[Environment]] 내부슬롯에 저장한다. outer 함수가 평가되어 함수 객체를 생성할 때(①), 현재 실행중인 실행 컨텍스트의 렉시컬 환경, 즉 전역 렉시컬 환경을 outer 함수 객체의 내부 슬롯에 저장한다.

outer 함수의 실행이 종료되면 실행 컨텍스트 스택에서 제거되지만 outer 함수의 렉시컬 환경까지 소멸하진않는다.