[JS] 클로저

🌱 클로저

---

클로저는 자바스크립트 고유의 개념이 아니므로 클로저의 정의가 ECMAScript 사양에 등장하지 않는다.

• MDN 정의 :

  A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

  클로저는 주변 상태(어휘적 환경)에 대한 참조와 함께 번들로 묶인(묶음) 기능의 조합이다. 즉, 클로저를 사용하면 내부 함수에서 외부 함수의 범위에 액세스할 수 있다. JavaScript에서는 함수가 생성될 때마다 함수가 생성될 때마다 클로저가 생성된다.

const x = 1;

function outerFunc() {
	const x = 10;

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

	innerFunc();
}

outerFunc();

const x = 1;

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

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

outerFunc();

✔️ innerFunc 함수가 outerFunc 내부에 정의된 중첩 함수가 아니라면 innerFunc 함수를 outerFunc 함수의 내부에서 호출해도 outerFunc 함수의 변수에 접근할 수 없다. 이런 현상이 발생하는 이유는 자바스크립트가 렉시컬 스코프를 따르는 언어이기 때문이다.

🌱 렉시컬(정적) 스코프

---

• 정의 : 자바스크립트 엔진이 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지 그 환경에 따라 상위 스코프를 결정하는 것.

✔️ 스코프의 실체는 실행 컨텍스트의 렉시컬 환경이다. 렉시컬 환경은 자신의 OuterLexicalEnvironmentReference를 통해 상위 렉시컬 환경과 연결되는데 이것이 바로 스코프 체인이다.

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

---

• 정의 : 렉시컬 스코프가 가능하려면 함수는 자신이 정의된 환경인 상위 스코프를 기억해야 한다. 이를 위해 함수는 자신의 내부 슬롯 [[Environment]]에 자신이 정의된 환경인 상위 스코프의 참조를 저장한다.
• 함수 코드 평가 순서 :

  1. 함수 실행 컨텍스트 생성

  2. 함수 렉시컬 환경 생성

     2.1 함수 환경 레코드 생성

     2.2 this 바인딩

     2.3 외부 렉시컬 환경에 대한 참조 결정