docs: 24.1 ~ 24.3 정리 (#1001)

docs/24_클로저/최주용.md

@@ -0,0 +1,197 @@
+# 📌 24장 클로저
+
+**TIL 기록일** : 2023.12.12 (24.1 ~ 24.3)
+
+## 목차
+
+[1. 서론](#-서론)
+[2. 렉시컬 스코프](#-241-렉시컬-스코프)
+[3. 함수 객체의 내부 슬롯 [[Environment]]](#-242-함수-객체의-내부-슬롯-environment)
+[4. 클로저와 렉시컬 환경](#-243-클로저와-렉시컬-환경)
+
+## 👉 서론
+
+클로저<sup>closure</sup> 는 난해하기로 유명한 자바스크립트의 개념 중 하나로 한번쯤 들어보았을 것이다. 사실 클로저는 앞서 살펴본 실행 컨텍스트를 이해하고 있다면 그리 어려운 개념은 아니다.
+
+클로저는 자바스크립트 고유의 개념이 아닌, 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다.
+
+MDN에서는 클로저에 대해 다음과 같이 설명한다.
+
+> 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.
+
+"함수가 선언된 렉시컬 환경"이란 무엇일까
+
+```javascript
+const x = 1;
+
+function outerFunc() {
+  const x = 10;
+  function innerFunc() {
+    console.log(x); // 10;
+  }
+
+  innerFunc();
+}
+
+outerFunc();
+```
+
+다음과 같이 작성한다면 `innerFunc` 함수를 `outerFunc` 함수의 내부에서 호출한다 하더라도 outerFunc 함수의 변수에 접근할 수 없다.
+
+```javascript
+const x = 1;
+
+function outerFunc() {
+  const x = 10;
+  innerFunc();
+}
+
+function innerFunc() {
+  console.log(x); // 1
+}
+
+outerFunc();
+```
+
+이 같은 현상이 발생하는 이유는 자바스크립트가 렉시컬 스코프를 따르는 프로그래밍 언어이기 때문이다.
+
+## 👉 24.1 렉시컬 스코프
+
+**자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라 한다.**
+
+23장 "실행 컨텍스트"에서 살펴보았듯이 스코프의 실체는 실행 컨텍스트의 렉시컬 환경이다. 이 렉시컬 환경은 자신의 "외부 렉시컬 환경에 대한 참조"를 통해 상위 렉시컬 환경과 연결된다. 이것이 바로 스코프 체인이다.
+
+따라서 다시 한번 렉시컬 스코프의 정의를 해보면 다음과 같다.
+
+**렉시컬 환경의 "외부 렉시컬 환경에 대한 참조"에 저장할 참조값, 즉 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정된다. 이것이 바로 렉시컬 스코프다.**
+
+## 👉 24.2 함수 객체의 내부 슬롯 [[Environment]]
+
+함수는 상위스코프를 기억하기 위해 **자신의 내부 슬롯 [[Environment]]에 자신이 정의된 환경, 즉 상위 스코프의 참조를 저장한다.**
+
+다시 말해, 함수 정의가 평가되어 함수 객체를 생성할 때 자신이 정의된 환경(위치)에 의해 결정된 상위 스코프의 참조를 함수 객체 자신의 내부 슬롯 [[Environment]]에 저장한다. 이때 [[Environment]]에 저장된 상위 스코프의 참조는 **현재 실행 중인 실행 컨텍스트**의 렉시컬 환경을 가리킨다.
+
+왜냐하면 함수 정의가 평가되어 함수 객체를 생성하는 시점은 함수가 정의된 환경, 즉 상위함수가 평가 또는 실행되고 있는 시점이며, 이때 실행 중인 실행 컨텍스트는 상위 함수의 실행 컨텍스트이기 때문이다.
+
+**따라서 함수 객체의 내부 슬롯 [[Environment]]에 저장된 현재 실행 중인 실행 컨텍스트의 렉시컬 환경의 참조가 바로 상위 스코프다. 또한 자신이 호출되었을 때 생성될 함수 렉시컬 환경의 "외부 렉시컬 환경에 대한 참조"에 저장될 참조값이다.**
+
+함수 객체는 자신이 존재하는 한, [[Envrionment]]에 저장한 렉시컬 환경의 참조, 상위 스코프를 기억한다.
+
+```javascript
+const x = 1;
+
+function foo() {
+  const x = 10;
+
+  // 상위 스코프는 함수 정의 환경에 따라 결정된다.
+  // 함수 호출 위치와 상위 스코프는 아무런 관계 x
+  bar();
+}
+
+// 함수 bar는 자신의 상위 스코프, 즉 전역 렉시컬 환경을 [[Environment]]에 저장하여 기억한다.
+function bar() {
+  console.log(x);
+}
+```
+
+foo, bar 함수 모두 전역에서 함수 선언문으로 정의되었다. 따라서 전역 코드가 평가되는 시점에 평가되어 함수 객체를 생성하고 전역 객체 `window`의 메서드가 된다. 이때 [[Environment]] 내부 슬롯에는, 함수 정의가 평가된 시점에서의 실행 중인 실행 컨텍스트의 렉시컬 환경인 전역 렉시컬 환경의 참조가 저장된다.
+
+## 👉 24.3 클로저와 렉시컬 환경
+
+다음 예제를 보자.
+
+```javascript
+const x = 1;
+
+// 1)
+function outer() {
+  const x = 10;
+  const inner = function () {
+    // 2)
+    console.log(x);
+  };
+  return inner;
+}
+
+// outer 함수를 호출하면 중첩 함수 inner를 반환한다.
+// 그리고 outer 함수의 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거된다.
+const innerFunc = outer(); // 3)
+innerFunc(); // 4)
+```
+
+outer 함수 (`3)`)을 호출하면 outer 함수는 중첩 함수 inner를 반환하고 생명 주기를 마감한다. 즉, outer 함수의 실행 컨텍스트가 제거되었으므로 outer 함수의 지역 변수 x 또한 생명주기를 마감한다.
+
+그러나 위 코드의 실행 결과(`4)`)는 outer 함수의 지역 변수 x의 값인 10이다. 이미 생명 주기가 종료되어 실행 컨텍스트 스택에서 제거된 outer 함수의 지역 변수 x가 부활이라도 한 듯 동작하고 있다.
+
+이처럼 **외부 함수보다 중첩 함수(내부 함수)가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있다. 이러한 중첩 함수를 클로저라고 부른다.**
+
+---
+
+> 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.
+
+"그 함수가 선언된 렉시컬 환경"이란 함수가 정의된 위치의 스코프, 즉 상위 스코프를 의미하는 실행 컨텍스트의 렉시컬 환경을 말한다.
+
+위 예제로 돌아가 보자.
+
+1. **전역 함수 객체의 상위 스코프 결정**
+   outer 함수가 평가되어 함수 객체를 생성(`1)`)할 때 현재 실행 중인 실행 컨텍스트의 렉시컬 환경, 즉 전역 렉시컬 환경을 outer 함수 객체의 [[Environment]] 내부 슬롯에 저장한다.
+   outer 함수를 호출하면 outer 함수의 렉시컬 환경이 생성되고, [[Environment]] 내부 슬롯에 저장된 전역 렉시컬 환경을 outer 함수 렉시컬 환경의 "외부 렉시컬 환경에 대한 참조"에 할당한다.
+
+2. **중첩 함수의 상위 스코프 결정**
+   inner 중첩 함수가 평가된다.(`2)` 함수 표현식으로 정의했기 때문에 런타임에 평가) 이 때 중첩 함수 inner는 자신의 [[Environment]] 내부 슬롯에 현재 실행 중인 실행 컨텍스트의 렉시컬 환경, outer 함수의 렉시컬 환경을 상위 스코프로서 저장한다.
+
+3. **outer 함수의 실행 컨텍스트 제거, but 렉시컬 환경은 유지**
+   outer 함수의 실행이 종료하면 inner 함수를 반환하면서 outer 함수의 생명 주기가 종료된다.(`3)`) 즉, 실행 컨텍스트가 실행 컨텍스트 스택에서 제거된다.
+   이때 **outer 함수의 실행 컨텍스트는 실행 컨텍스트 스택에서 제거되지만 outer 함수의 렉시컬 환경까지 소멸하는 것은 아니다.**
+
+   outer 함수의 렉시컬 환경은 inner 함수의 [[Environment]] 내부 슬롯에 의해 참조, inner 함수는 전역 변수 `innerFunc`에 의해 참조되고 있으므로 가비지컬렉션의 대상이 되지 않는다.
+
+4. **inner 함수 호출**
+   inner 함수를 호출(`4)`)하면 inner 함수의 실행 컨텍스트가 생성되고 실행 컨텍스트 스택에 푸시된다. 그리고 렉시컬 환경의 외부 렉시컬 환경에 대한 참조는 inner 함수 객체의 [[Environment]] 내부 슬롯에 저장되어 있는 참조값이 할당된다.
+   중첩 함수는 외부 함수의 생존 여부와 상관없이 자신이 정의된 위치에 의해 결정된 상위 스코프를 기억한다. 이처럼 중첩 함수 inner의 내부에서는 상위 스코프를 참조할 수 있으므로 상위 스코프의 식별자를 참조할 수 있고 식별자의 값을 변경할 수도 있다.
+
+![](https://velog.velcdn.com/images/wuzoo/post/9e9f69c1-f7f7-465d-86e6-ed88af384642/image.png)
+
+---
+
+자바스크립트의 모든 함수는 상위 스코프를 기억하므로 이론적으로 모든 함수는 클로저다. 하지만 일반적으로 모든 함수를 클로저라고 하지는 않는다.
+
+1. 상위 스코프의 어떤 식별자도 참조하지 않는 함수는 클로저가 아니다.
+   예를 들어 중첩 함수 `bar`가 외부 함수 `foo`보다 더 오래 유지된다 하더라도, 상위 스코프의 어떤 식별자도 참조하지 않는다면 클로저가 아니다. 참조하지도 않는 식별자를 기억하는 것은 메모리 낭비이기 때문이다.
+
+2. 외부 함수보다 일찍 소멸하는 함수는 클로저가 아니다.
+   상위 스코프의 식별자를 참조한다 하더라도, 외부 함수 `foo`로부터 중첩 함수 `bar`가 반환되지 않는다는 등의 이유로 중첩 함수가 생명 주기가 더 짧은 경우가 있다. 이러한 중첩 함수는 클로저였지만 외부 함수보다 일찍 소멸하기 때문에 콜로저의 본질에 부합하지 않는다. 따라서 클로저라고 하지 않는다.
+
+다음과 같은 예제를 보자.
+
+```html
+<!DOCTYPE html>
+<html>
+  <body>
+    <script>
+      function foo() {
+        const x = 1;
+        const y = 2;
+
+        function bar() {
+          debugger;
+          console.log(x);
+        }
+        return bar;
+      }
+
+      const bar = foo();
+      bar();
+    </script>
+  </body>
+</html>
+```
+
+중첩 함수 bar는 상위 스코프의 식별자(`x`)를 참조하고 있으므로 클로저다. 그리고 외부 함수의 외부로 반환되어 외부 함수보다 더 오래 살아남는다.
+
+이러한 중첩 함수를 클로저라고 부른다. **클로저는 중첩 함수가 상위 스코프의 식별자를 참조하고 있고 중첩 함수가 외부 함수보다 더 오래 유지되는 경우에 한정하는 것이 일반적이다.**
+
+다만 클로저인 중첩 함수 bar는 상위 스코프의 x, y 식별자 중 x만 참조하고 있다. 이런 경우 대부분의 모던 브라우저는 최적화를 통해 식별자 중 클로저가 참조하고 있는 식별자만을 기억한다.
+
+클로저에 의해 참조되는 상위 스코프의 변수를 **자유 변수<sup>free variable</sup>** 라고 부른다.
+클로저란 "함수가 자유 변수에 대해 닫혀있다.<sup>closed</sup>"라는 의미다. 즉, "자유 변수에 묶여있는 함수"이다.