실행 컨텍스트에 대해 설명해주세요

실행 컨텍스트란?

자바스크립트에서 실행 컨텍스트는 모든 코드의 동작원리를 담고 있는 핵심 개념이다.

다음 예시를 실행 컨텍스트 관점으로 설명해보자.

var outer = () => {
  const a = 3;

  const inner = () => {
    const b = 5;
    return a + b;
  };

  return inner;
};

const closure = outer();

closure();

소스코드 평가와 실행

1. 전역 코드 평가

1. 전역 실행 컨텍스트 생성
2. var 키워드로 선언된 전역변수 outer는 전역 객체에 등록
3. const 키워드로 선언된 전역변수 closure는 선언적 환경 레코드에 등록
4. this는 전역 객체 바인딩

2. 전역 코드 실행 단계

1. outer 우항의 함수를 평가한 뒤, 메모리에 저장한 뒤 전역 객체에서 outer 식별자에 할당
2. closure 우항의 outer 함수를 전역 객체에서 찾아 호출

3. outer 함수 평가 단계

1. outer 함수 실행 컨텍스트 생성
2. outer 함수에서 선언된 변수 a, inner를 환경 레코드에 등록
3. outer 함수의 외부 렉시컬 환경 참조는 outer 변수에 할당된 익명함수 객체의 내부슬롯 [[Environment]]가 가리키는 외부 렉시컬 환경을 가리킨다.

4. outer 함수 실행 단계

1. outer 함수 환경 레코드의 변수 a에 값 3이 할당된다.
2. 변수 inner에 익명 함수 객체의 참조값이 할당되고, 익명 함수 객체의 내부 슬롯 [[Environment]]은 정의된 outer 렉시컬 환경을 가리킨다.

5. 전역 코드 실행 단계 복귀

1. 전역 렉시컬 환경의 선언적 환경 레코드에서 closure를 찾는다.
2. inner 함수 객체가 closure라는 식별자에 할당된다.

6. closure 함수 평가 단계

1. closure() 문이 실행되면서 closure의 실행 컨텍스트가 생성된다.
2. closure를 실행하기 위해 inner 함수 객체를 평가한다.

   즉, closure() 평가단계 === inner() 평가단계

3. const로 선언된 변수 b가 closure 환경 레코드에 등록된다.
4. 화살표 함수의 this는 함수가 정의될 때 상위 스코프의 this로 정적으로 결정된다.

7. closure 함수 실행 단계

1. closure 즉, inner 함수 내부 코드가 실행
2. b에 값 5가 할당되고 a+b를 수행하기 위해 스코프 체인에서 a를 찾는다.
3. closure 환경 레코드에는 a가 존재하지 않기 때문에 외부 렉시컬 환경 참조를 따라 익명함수 객체로 이동하고, 익명함수 객체의 [[Environment]]내부 슬롯이 가리키는 outer 함수 렉시컬 환경으로 이동된다. 결국 outer 환경 레코드에서 a를 찾을 수 있다.
4. a+b 연산을 수행하고 연산값을 반환한다.

8. closure 실행 컨텍스트 소멸

• closure 함수 코드가 실행을 마치고 closure의 실행 컨텍스트가 pop 되어 더 이상 참조되지 않는 객체들은 Garbage Collector에 의해 메모리가 해제된다.

9. 전역 실행 컨텍스트 소멸

• 마지막으로 전역 실행컨텍스트가 pop 되어 참조될 수 있는 객체가 없기 때문에 모든 객체가 Garbage Collector에 의해 메모리가 해제된다.