docs: day8(24.1 ~ 24.3) (#1000)

docs/24_클로저/변지인.md

@@ -0,0 +1,98 @@
+## 클로저
+
+**오늘 읽은 범위** : 24.1 ~ 24.3
+
+### 0. 클로저
+
+---
+
+#### _클로저(closure)_
+
+자바스크립트 고유의 개념이 아닌, 함수를 일급 객체로 취급하는 `함수형 프로그래밍 언어`(하스켈, 리스프, 얼랭, 스칼라 등)에서 사용되는 중요한 `특징`이다.
+
+```
+클로저 = 함수 + 렉시컬 함수
+```
+
+### 1. 렉시컬 스코프
+
+---
+
+#### _렉시컬 스코프(정적 스코프)_
+
+자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 `함수를 어디에 정의했는지에 따라 상위 스코프를 결정`하는데 이걸 **렉시컬 스코프**라고 한다.
+
+`스코프의 실체`는 실행 컨텍스트의 `렉시컬 환경`이다. 이 렉시컬 환경은 자신의 "외부 렉시컬 환경에 대한 참조"에 저장할 참조값이 바로 상위 렉시컬 환경에 대한 참조이며, 이것이 상위 스코프이기 때문이다.
+
+즉, 렉시컬 스코프는
+=> `렉시컬 환경의  "외부 렉시컬 환경에 대한 참조"에 저장할 참조값, 즉 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정.`
+
+```jsx
+const x = 1;
+
+function foo() {
+  const x = 10;
+  bar();
+}
+
+function bar() {
+  console.log(x);
+}
+
+foo(); // ?
+bar(); // ?
+```
+
+### 2. 함수 객체의 내부 슬롯 [[Environment]]
+
+---
+
+#### _함수 객체의 내부 슬롯 [[Environment]]_
+
+함수가 정의된 환경(위치)과 호출되는 환경(위치)는 다를 수 있어서 렉시컬 스코프가 가능하려면 함수는 자신이 호출되는 환경과는 상관없이 자신이 정의한 함수(=상위 스코프)를 기억해야 한다. 이를 위해 `함수 자신의 내부 슬롯 [[Environment]]에 자신이 정의된 환경, 즉 상위 스코프를 저장한다.`
+
+- 전역 코드 평가 시점 -> 전역 렉시컬 환경의 참조 저장
+- 외부 코드 평가 시점 -> 외부 렉시컬 환경의 참조 저장
+
+함수 객체의 내부 슬롯 [[Environment]]에 저장된 현재 실행 컨텍스트의 렉시컬 환경의 참조가 **상위 스코프**다. 또한 자신이 호출될 때 생성될 함수 렉시컬 환경의 "외부 렉시컬 환경에 대한 참조"에 저장될 참조 값이다. **함수 객체**는 `내부 슬롯 [[Environment]]에 저장한 렉시컬 환경의 참조, 즉 상위 스코프를 자신이 존재하는 한 기억한다.`
+
+### 3. 클로저와 렉시컬 환경
+
+클로저 : 외부 함수보다 중첩 함수가 더 오래 유지되는 경우, `이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있는 중접 함수`. 중첩 함수가 상위 스코프의 식별자를 참조하고 있고, 중첩 함수가 외부 함수보다 더 오래 유지되는 경우에만 한중하는 것이 일반적.
+
+자유 함수 : 클로저에 의해 참조되는 상위 스코프의 변수. 클로저란 “함수가 자유 변수에 대해 닫혀있다.”라는 의미. 즉, `자유 변수에 묶여있는 함수`
+
+---
+
+#### _클로저와 렉시컬 환경_
+
+```jsx
+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는 함수 표현식으로 정의했기 때문에 런타임에 평가됨. inner함수는 [[Environment]] 내부 슬롯에 현재 실행 중인 싱행 컨텍스트의 렉시컬환경, 즉 outer 함수의 렉시컬 환경을 상위 스코프로 저장.
+
+- outer 함수의 실행 컨텍스트가 실행 컨텍스트 스택에서 제거.
+
+- inner 함수의 [[Environment]] 내부 슬롯에 의해 참조되고 있고, innter 함수는 전역 변수 innerFunc에 의해 참조되고 있으므로, 가비지 컬렉팅이 되지 않기 때문.
+
+- 이론적으로 자바스크립트의 모든 함수는 상위 스코프를 기억하기 때문에 클로저라고 할 수 있음.
+
+- 하지만 상위 스코프의 어떠한 식별자도 참조하지 않는다면 모던 브라우저에 의해 최적화되어 상위 스코프를 기억X.
+
+=> 중첩 함수 inner의 내부에는 상위 스코프를 참조할 수 있으므로 상위 스코프의 식별자를 참조할 수도, 식별자의 값을 변경할 수도 있음.
+