JavaScript Closure

JavaScript의 Closure에 대해 알아보자

JS Closure

Scope

• 함수 스코프

  • 함수 단위에서 스코프 형성
  • var

• 블록 스코프

  • if, for 문 등의 블록 단위에서 스코프 형성
  • const, let

Scope Chain

상위 렉시컬 환경에 대한 참조
=> 자신을 둘러싼 부모 함수의 스코프 공유

---

Closure

Closure = 함수 + 함수를 둘러싼 환경

Closure는 함수가 생성되는 시점에 그 함수의 Lexical Env를 포함하여 생성. 이후에 함수가 사용될 때, Lexical Env 또한 이용

let color = "red";
function foo() {
  let color = "blue"; // 2
  function bar() {
    console.log(color); // 1
  }
  return bar;
}
let baz = foo(); // 3
baz(); // 4

1. bar 함수는 color를 찾아 실행하는 함수
2. bar 함수가 생성될 때, 렉시컬 환경으로 foo()의 환경을 저장 => Closure
3. bar를 global의 baz에 할당
4. global에서 baz 실행 => bar 실행
5. bar의 환경 내에서 color 찾음 => 없음
6. bar의 렉시컬 환경(foo()) 내에서 color 찾음 => 있음, blue
7. blue 출력

bar는 자신이 생성된 스코프를 벗어나, global 환경에서 실행되었고, 실행 스택과 상관없는 foo()의 환경을 참조하였음

Closure의 메모리 누수

Scope Chain에 의해(렉시컬 환경에 대한 참조), 사용하지 않는 함수에 의해 상위 렉시컬 스코프를 참조함으로써 메모리 누수 발생 가능

---

참고

https://meetup.toast.com/posts/86 자바스크립트의 스코프와 클로저