[1장] 4.1 스코프와 클로저

[originchoi]

페이지 104
실행 컨텍스트가 스택에 푸시되고 팝되는 과정은 어떻게 진행되며, 이 과정에서 클로저가 어떻게 형성되고 유지되는지 설명해 주세요!

[seohag]

function first() {
  console.log("First");
  second();
}

function second() {
  console.log("Second");
  third();
}

function third() {
  console.log("Third");
}

first();

우선 위의 예제로 컨텍스트가 push pop되는 과정을 설명해보겠습니다.

1. 전역 컨텍스트 생성: JS 코드가 로드되면 먼저 전역 컨텍스트가 생성되어 스택에 push 됩니다.
2. first 함수 호출: first() 가 호출되면 함수에 대한 실행 컨텍스트가 생성되어 스택에 push 됩니다. [전역 컨텍스트, first 컨텍스트]
3. second 함수 호출: second() 가 호출되면 second 함수에 대한 실행 컨텍스트가 생성되고 스택에 push 됩니다. [전역 컨텍스트, first 컨텍스트, second 컨텍스트]
4. third 함수 호출: third() 가 호출되면, third 함수에 대한 실행 컨텍스트가 생성되어 스택에 push 됩니다. [전역 컨텍스트, first 컨텍스트, second 컨텍스트, third 컨텍스트]
5. third 함수 종료: third 함수가 종료되면 컨텍스트에서 third가 pop 됩니다. [전역 컨텍스트, first 컨텍스트, second 컨텍스트]
6. second 함수 종료: second 함수가 종료되면 컨텍스트에서 second가 pop 됩니다. [전역 컨텍스트, first 컨텍스트]
7. first 함수 종료: first 함수가 종료되면 컨텍스트에서 first가 pop 됩니다. [전역 컨텍스트]

이제 클로저(함수가 선언될 당시의 렉시컬 환경을 기억하여 함수가 호출될 때 그 환경을 참조할 수 있게 해주는)가 어떻게 형성되고 유지되는지 살펴보면

function outerFunction() {
  let outerVariable = "전 바깥 스코프에 있어요"

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

const closure = outerFunction();
closure(); // "전 바깥 스코프에 있어요" 출력

1. 전역 컨텍스트 생성: [전역 컨텍스트]
2. outerFunction 호출: [전역 컨텍스트, outerFunction 컨텍스트]
3. outerFunction 실행: outerFunction이 실행되면서 outerVariable이 생성되고 초기화됩니다. innerFunction이 선언되고 이때 innerFunction의 [[scope]] 내부 슬롯은 outerFunction 실행 컨텍스트의 렉시컬 환경을 참조 합니다.
4. innerFunction 리턴: outerFunction이 innerFunction을 리턴합니다. 이때 innerFunction은 outerFunction의 렉시컬 환경을 기억합니다. outerFunction 실행이 끝나고 실행 컨텍스트는 스택에서 pop됩니다. [전역 컨텍스트]
5. closure 호출: 리턴된 innerFunction이 closure에 할당됩니다. closure() 이 호출되면 innerFunction에 대한 실행컨텍스트가 생성되어 스택에 push 됩니다. [전역 컨텍스트, innerFunction 컨텍스트]
6. innerFunction 실행: innerFunction이 실행되면서 outerVariable을 참조하려 하고, innerFunction은 outerFunction의 렉시컬 환경을 기억하고 있으므로 outerVariable을 참조할 수 있습니다. outerFunction은 종료되었지만 outerVariable은 클로저에 의해 메모리에 유지 됩니다.

즉 클로저는 함수가 선언된 환경을 기억하고 유지함으로써, 실행컨텍스트가 스택에서 제거된 후에도 해당 환경의 변수들을 참조할 수 있게 합니다.