🪢 자바스크립트의 클로저

이 글을 읽을 때는 실행 컨텍스트와 스코프에 대한 개념을 필요로 한다. 이미 내가 써둔 실행 컨텍스트와 스코프 글을 읽었다면 상관없겠지만 아직 이해가 안 됐거나, 읽지 않았다면 읽고 오기를 바란다.

➡️ 자바스크립트의 스코프, 자바스크립트의 실행 컨텍스트

읽고 왔다고 생각하고 이전에 다룬 내용은 생략하고 진행하겠다.

---

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

함수 정의가 평가되어 함수 객체가 생성될 때, 함수 객체는 내부 슬롯 [[Environment]]에 자신이 정의된 환경인 상위 스코프의 참조를 저장한다. 그리고 함수 객체는 호출될 때, 함수 실행 컨텍스트를 생성하면서 OuterEnvironmentReference에 함수 객체의 내부 슬롯 [[Environment]]에 저장된 Lexical Environment의 참조가 할당된다. 이것이 바로 함수 정의 위치에 따라 상위 스코프를 결정하는 렉시컬 스코프의 실체다.

---

🔒 클로저와 Lexical Environment

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

어떤 함수의 실행 컨텍스트가 제거되었을 때, 그 함수의 Lexical Environment까지 소멸하는 것은 아니다. 만약에 그 함수의 Lexical Environment가 누군가가 참조하고 있다면, 가비지 컬렉터에 의해 메모리 공간이 해체되지 않는다.

이 때, 그 함수의 Lexical Environment를 참조하는 누군가가 그 함수의 중첩함수 일 때, 그 중첩함수를 클로저라고 한다. 이 때, 클로저는 그 함수의 어떤 식별자라도 참조하고 있어야하고, 그 함수보다 생명 주기가 길어야한다.

어떤 식별자라도 참조하지 않으면 대부분의 모던 브라우저는 최적화를 통해 상위 스코프를 기억하지 않으며, 이러면 당연히 클로저의 본질에 부합하지 않는다. 또한 외부 함수인 그 함수보다 중첩함수가 생명 주기가 짧다면 생명 주기가 종료한 외부 함수의 변수를 참조한다는 클로저의 본질에 부합하지 않는다.

클로저에 의해 참조되는 상위 스코프의 변수를 자유 변수(free variable)라고 부른다. 클로저란 “자유 변수에 묶여있는 함수"라고 할 수 있다.

---

⚙️ 클로저의 활용

클로저는 상태(state)를 안전하게 변경하고 유지하기 위해 사용한다. 다시 말해, 상태가 의도치 않게 변경되지 않도록 상태를 안전하게 은닉(information hiding)하고 특정 함수에게만 상태 변경을 허용하기 위해 사용한다.
(근데 클래스에서 private 필드를 정의할 수 있는 마당에 굳이 클로저를 써야하는 이유를 나는 아직 잘 모르겠다. 외에도 활용하는 방향이 많은 것 같으나, 너무 많은 것 같아(...) 굳이 글에 쓰지는 않겠다.)

---

🧐 정리

• 클로저란 이미 생명 주기가 종료한 외부 함수의 변수를 참조하고 있는 함수를 말한다.

---

📖 참고자료

• 모던 자바스크립트 Deep Dive
  • 24. 클로저 (389p~413p)
• 코어 자바스크립트
  • 5. 클로저 (115p~145p)
• YOU DON’T KNOW JS
  • CHAPTER 5. 스코프 클로저 (239p~255p)