javascript 클로저(closure)

클로저(closure)란?

클로저는 함수와 그 함수가 선언되었을 때의 어휘적 환경(lexical environment)과의 조합이다. 외부 함수의 변수에 접근할 수 있는 내부 함수, 또는 이러한 작동원리를 의미하기도 한다.

자바스크립트 어휘적 환경(lexical environment)

lexical scope란 변수나 함수가 선언될 때 속한 스코프를 말한다.

function outer() {
  let title = "title"
  function inner() {
    console.log(title);
  }
  inner();
}
outer();

위의 코드를 실행 시켰을 때 title 변수가 정상적으로 출력된다. 그 이유는 내부함수 inner의 렉시컬 스코프가 외부함수인 outer까지 고려해서 접근하기 때문이다.

클로저 예시

function outer() {
  let title = "title"
  function inner() {
    console.log(title);
  }
  return inner;
}
let result = outer();
result(); // "title"

위의 코드는 outer함수가 inner함수를 호출하는 것이 아니라 반환한다. 따라서 result에는 outer함수의 실행값인 inner 함수 자체가 담기게 되고 outer는 변수에 담기면서 실행되고 종료된다. outer 함수가 종료되면 inner에서 title 변수를 참조하지 못할텐데 result를 실행하면 title을 성공적으로 반환하는 것을 알 수 있다. 왜그럴까?

위에서 클로저가 외부함수에 접근할 수 있는 내부함수라고 했는데, 바로 이러한 상황을 의미한다. 내부함수가 속한 외부함수가 이미 종료되었지만 내부함수는 선언될 당시 렉시컬 스코프를 기억했다가 외부함수의 변수를 참조하는 것이다.