01. 클로저의 의미 및 원리 이해

function sum(x){
	return function (y) {
		return x + y;
	};
}
const add = sum(2);
console.log(add(7));
  1. 코드 실행 전 코드 평가

    1. Global에 LexicalEnvironment 생성 후 전역 코드 평가 → sum 함수와 add 변수 호이스팅

    Untitled

    Untitled

    b. sum함수도 global과 동일하게 LexicalEnvironment 생성하고 sum 함수의 내부 코드 평가 (함수가 선언되는 시점에 결정)

    Untitled

  2. 코드의 실행 1.

    const add = sum(2);
    

    레코드 안 x 변수에 2 기록

Untitled

  1. sum의 LexicalEnvironment는 콜스택에서 pop됨
  2. 다시 Global의 LexicalEnvironment로 돌아와서 Record에 있는 add 변수에 익명함수를 할당함

Untitled

console.log(add(7));

console.log함수에 add 호출

  1. add에 LexicalEnvironment 생성후 add 함수 내부평가

Untitled

  1. sum 함수 안의 익명함수 Outer가 가리키는 LexicalEnvironment의 결정은 익명함수가 선언되는 시점에 결정됨 → sum 함수 내부 코드 평가 과정을 진행할 때 현재 실행중인 실행 컨텍스트인 sum의 LexicalEnvironment를 익명함수의 Outer에 먼저 등록을 하는 것

    ⇒ 어떤 함수의 Outer는 어떤 LexicalEnvironment에서 선언 되었는 지가 중요함

  2. add 함수 내부 평가가 끝나고 코드 실행. Record 안의 y 변수에 7을 기록

Untitled

  1. x는 어디에?

    → Record에 기록되어 있는 변수 확인하고 해당하는 변수가 없다면 Outer가 가리키는 LexcialEnvironment의 Record를 확인하게 됨

    → 이 과정을 반복하여 Outer가 가리키는 LexicalEnvironment의 Record를 탐색하는데 최종적으로 Global의 LexicalEnvironment Record에도 변수가 존재하지 않는 경우에 ReferenceError가 발생