[JS] 실행 컨텍스트

실행 컨텍스트(Execution Context)란?

실행할 코드에 제공할 환경정보를 모아놓은 객체
자바스크립트는 실행컨텍스트를 콜스택에 쌓은 후 실행하여 코드의 환경과 순서를 보장
FILO(First In, Last Out) 구조로 순서보장, 내부의 컨텍스트로부터 환경 보장

내가 이해한바로는
Context는 단어 그 자체로 흐름이라고 이해하면 좋을 것 같다.
아래의 예시를 보며 이해해보자

function B() {
  console.log('func b');
}

function A() {
  B();
}

A();

위의 자바스크립트가 실행되면

1. 전역 컨텍스트가 콜스택에 담긴다.
2. 전체의 흐름을 이어가기 위해서 A라는 흐름을 알아야하기 때문에 A라는 Context가 콜 스택에 push
3. A라는 흐름을 이어가기 위해서는 B라는 흐름을 알아야하기 때문에 B라는 Context가 콜 스택에 push

콜스택에 쌓여있는 Context들을 아래에서부터 실행하면,
4. A컨텍스트를 실행하다 B 컨텍스트가 필요하기 때문에 A컨텍스트에서의 흐름을 B컨텍스트로 넘김
5. B컨텍스트내의 흐름이 모두 종료되면 콜스택에서 B컨텍스트를 pop하고, 흐름을 A컨텍스트로 넘김
6. A컨텍스트의 흐름이 모두 종료되면 콜스택에서 A컨텍스트를 pop
7. 더 이상 실행할 코드가 없으면 전역 컨텍스트를 pop

그러면 콜스택에 남은 컨텍스트가 존재하지 않게되고,
이는 자바스크립트가 잘 진행되었다는 것을 의미해 종료된다.

 

Lexical Environment vs Variable Environment

Lexical Environment : 블록 유효 범위 내의 식별자와 결과를 저장
Variable Environment : 함수 요휴 범위 내의 식별자와 결과를 저장

function test() {
    var a = 1;
    const b = 2;
    if(true) {
        var c = 3;
        let d = 4;
    }
}
test();

위와 같은 js 코드가 실행되어 test()가 호출되는 시점에는
전역적으로 선언된 a, c는 Variable Environment에 저장되고,
블록내에 선언된 b는 Lexical Environment에 저장된다.

if 문이 호출되는 시점에는 새로운 Lexical Environment가 생성된다.
전역적으로 선언된 a, c가 Variable Environment에 저장되어있고,
b는 outer의 Lexical Environment에 저장, a는 Lexical Environment에 저장된다.
outer는 현재 블록을 감싸고 있는 블록으로 이해했다.

이 부분에서 왜 내부 블록에서 선언된 const, let 변수를 사용할 수 없는지 알 수 있었는데
외부 블록은 즉, 콜스택 하단의 컨텍스트는 상단 컨텍스트 환경을 알지 못하기 때문이다.