Closure

• 클로저는 함수가 선언될 때 자신의 주변 환경(Lexical Environment)을 기억하여, 함수 내부에서 자유 변수(free variables)에 접근할 수 있게 해주는 기능.

function outerFunction() {
  const outerVariable = "I am from the outer function.";

  function innerFunction() {
    console.log(outerVariable); // outerFunction의 자유 변수에 접근
  }

  return innerFunction;
}

const closureFunction = outerFunction();
closureFunction(); // "I am from the outer function." 출력

Lexical Environment

• 스코프와 변수 식별자(identifier)를 관리하는 데 사용되는 내부 데이터 구조.
• 함수/변수가 선언되는 위치에 따라 Lexical Environment가 형성되고, 해당 스코프에서 접근 가능한 변수와 함수들의 정보를 담고 있음.
• 각 함수/블록이 실행될 때 자신의 Lexical Environment를 생성함. LE는 식별자, 해당 값, 외부 스코프에 대한 참조 등을 포함.
• LE는 또한 스코프 체인을 형성하는 데 사용됨.
• 스코프 체인: 변수를 찾을 때 현재 실행 중인 컨텍스트부터 외부 스코프를 순차적으로 탐색하는 메커니즘.

예시)

• 위의 코드에서 outerFunction 내부에서 innerFunction 호출.
• innerFunction에서 사용되는 outerVariable은 외부 함수인 outerFunction의 LE에 있음.
• 이는 스코프 체인을 통해 innerFunction이 outerFunction의 LE에 접근하여 외부 변수에 접근할 수 있기 때문.

Free Variable

• 함수 내에서 사용되지만 해당 함수 내에서 정의되지 않은 변수.
• 외부 스코프에서 탐색되는 변수.
• 위의 코드에서 outerVariable이 자유 변수.
• 클로저를 이용하여 innerFunction이 outerFunction의 환경을 기억하고 있기 때문에 innerFunction이 호출될 때 outerVariable에 접근할 수 있는 것.