Closure.md

클로저

클로저(Closure)는 함수가 동적으로 생성된 변수에 접근할 수 있는 방법을 제공합니다. 클로저는 함수 내부에 선언된 변수를 함수 외부에서도 사용할 수 있도록 해줍니다.

클로저는 내부 함수가 외부 함수의 변수를 참조할 때 발생합니다. 이때 내부 함수가 외부 함수보다 더 오래 유지될 경우, 내부 함수는 외부 함수의 변수를 계속 참조할 수 있습니다. 이렇게 외부 함수의 변수를 계속 참조할 수 있는 함수를 클로저라고 합니다.

const x = 1;

// (1)
function outer() {
  const x = 10;
  const inner = function() { console.log(x);} // (2)
  return inner;
}

// outer 함수를 호출하면 중첩 함수 inner를 반환합니다.
// 그리고 outer 함수의 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거됩니다.
const innerFunc = outer(); // (3)
innerFunc() // (4) 10

1. outer 함수를 호출하면 outer 함수는 중첩 함수 inner를 반환하고 생명 주기를 마감합니다. 즉, outer 함수의 실행이 종료되면 outer 함수의 실행 컨텍스트는 실행 컨텍스트 스택에서 제거됩니다.

2. outer 함수의 지역 변수 x와 변수 값 10을 저장하고 있던 outer 함수의 실행 컨텍스트가 제거되었으므로 outer 함수의 지역 변수 x 또한 생명주기를 마감합니다. 따라서 outer 함수의 지역 변수 x는 더는 유효하지 않게 되어 x 변수에 접근할 수 있는 방법은 달리 없어 보입니다.

3. 하지만 위 코드의 실행결과 (4) 는 outer 함수의 지역 변수 x의 값인 10입니다.

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

---

참고 모던 자바스크립트 Deep Dive ~393p