실행 컨텍스트(execution context)를 공부했습니다.

실행 컨텍스트(execution context)

• Execution ⇒ 실행, Context ⇒ 문맥/맥락/환경

  • Context란 코드의 배경이 되는 조건/환경

• 동일한 조건을 지닐 수 있는 조건

  • 전역공간
  • 함수
  • eval
  • module

• 즉, 실행 컨텍스트는 함수를 실행할 때 필요한 조건/환경정보를 담은 객체

• 예제1

  // 코드의 결과를 예측해 보자
  var a = 1;
  function outer() {
    console.log(a); // 1
  
    function inner() {
      console.log(a); // 2
      var a = 3;
    }
  
    inner();
  
    console.log(a); // 3
  }
  outer();
  console.log(a); // 4

1. 제일 먼저 전역 컨텍스트가 열림 ⇒ 전역 공간을 한 줄 한 줄 실행
2. outer() 실행 함수를 만남
3. outer 함수를 호출함에 따라서 outer 함수의 실행 컨텍스트가 열리면서 outer 함수의 내부에 대해서 한 줄 한 줄 실행하게 됨.
4. 주석으로 표시된 첫 번째 console.log 가 출력.
5. inner 함수 선언부는 넘어가고 inner 실행 함수를 만나 그제서야 inner 함수 실행 컨텍스트가 열림
6. 두 번째 console.log 출력
7. inner 함수 호출이 종료되고 세 번째 console.log 출력
8. outer 함수 실행 컨텍스트가 종료되면 네 번째 console.log 출력

제일 먼저 들어왔던게 제일 마지막에 빠지고, 제일 마지막에 들어온 게 제일 먼저 빠지는 개념을 “스택”이라고 한다. (마지막으로 제일 처음에 생성되었던 전역 컨텍스트가 사라지는)

코드 실행에 관여하는 스택을 “콜스택” 이라고 한다.

• 콜스택이란 현재 어떤 함수가 동작중인지, 다음에 어떤 함수가 호출될 예정인지 등을 제어하는 자료구조다.

• 실행 컨텍스트에는 세 가지 환경 정보들이 담긴다.

  • VariableEnvironment
    • 현재 환경과 관련된 식별자 정보들이 담긴다.
    • 식별자 정보를 수집하는 용도로만 쓰인다.
  • LexicalEnvironment
    • 현재 환경과 관련된 식별자 정보들이 담긴다.
    • 각 식별자에 담긴 데이터를 추적하는 용도로 쓰인다.
  • ThisBinding
  • 컨텍스트 내부 코드들을 실행하는 동안에 변수의 값들이 변화가 생기면 그 값이 LexicalEnvironment에만 실시간으로 반영된다. 즉, VariableEnvironment와 LexicalEnvironment는 값의 변화가 실시간으로 반영되느냐 그렇지 않느냐의 차이만 있다.

• LexicalEnvironment

  • 실행 컨텍스트를 구성하는 환경 정보들을 모아 사전처럼 구성한 객체

  • 어휘적 환경, 사전적인 환경

  • 예를 들어 영한 사전은 한글로 설명해주는 내용들로 이루어진 사전인데, 이와 비슷하게 LexicalEnvironment는 어떠한 실행 컨텍스트 A에 대한 환경정보가 담겨있는 사전이다.

    • environmentRecord
      • 현재 컨텍스트 내부의 식별자 정보
      • 현재 문잭의 식별자 정보가 수집된다.
        • 수집 과정에서 발생하는 현상을 좀 더 쉽게 생각하는 방법이 있다.
          현재 컨텍스트 식별자 정보들을 수집해서 environmentRecord에 담는 과정을 바로 “호이스팅” 이라고 한다.
    • outerEnvironmentReference
      • 외부 환경(Lexical Environment)을 참조하는 정보들이 담겨있다.
      • 현재 문맥에 관련 있는 외부 식별자 정보를 참조한다.

  • 호이스팅

    • 현재 컨텍스트 식별자 정보들을 수집해서 environmentRecord에 담는 과정을 바로 “호이스팅” 이라고 했다.
    • 호이스팅의 뜻은 끌어올리다인데, 무엇을 끌어올리냐면 식별자 정보를 실행 컨텍스트 맨 위로 끌어올린다.
    • 호이스팅은 실제하는 현상이 아닌, environmentRecord의 정보수집 과정을 좀 더 쉽게 이해하기 위해서 만든 허구의 개념이다.
    • 호이스팅 예제1 (우리가 이해하기 쉽게 만들어 놓은 개념)

    // 2-2-1
    console.log(a());
    console.log(b());
    console.log(c());
    
    function a() {
      return "a";
    }
    var b = function bb() {
      return "bb";
    };
    var c = function () {
      return "c";
    };
    ****

    //  {
    //    function a() { ... },
    //    b: undefined,
    //    c: undefined
    //  }
    function a() {
      return "a";
    }
    var b;
    var c;
    console.log(a());
    console.log(b());
    console.log(c());

    function a() {
      return "a";
    }
    var b = function bb() {
      return "bb";
    };
    var c = function () {
      return "c";
    };

이렇게 위에 끌어올려진 내용 전체가 바로 environmentRecord다.
실행 컨텍스트가 처음 생성되는 순간에 제일 먼저 하는 일이 이것이다. (정보수집)

• 현재 컨텍스트에서 선언되어 있는 식별자들이 무엇이 있느냐라는 정보를 코드 순서대로 수집하다 보니 호이스팅한 것이랑 똑같은 개념이 되어 버린 것

• 스코프 체인

  • outerEnvironmentReference에 의해서 만들어진다.
  • 스코프란? 변수의 유효범위 ⇒ 변수의 유효범위는 실행 컨텍스트가 만드는 것
  • inner 에서 선언한 변수들은 outer 에서는 접근 할 수 없다. outer 에서 선언한 변수들은 inner 에서 접근 가능하다.
    • inner 함수의 environmentRecord는 오직 inner 안에서만 존재하기 때문.
    • inner 에서 ouber 접근은 outerEnvironmentReference를 통해서 접근 할 수 있다.
    • 즉, 외부로는 나갈 수 있는데 자신보다 더 안쪽으로는 접근할 수 없다라는게 유효범위!
  • 1. inner에서 어떤 변수를 찾으라고 명령을 하면, 일단 inner에서 먼저 찾는다.
       environmentRecord에서 해당 변수가 있는지 찾는다.
  2. inner에 없다면 outerEnvironmentReference를 타고 outer에 있는 LexicalEnvironment에서 environmentRecord에서 변수를 찾는다.
  3. 반복
  • 가장 가까운 자기 자신부터 점점 멀리 있는 스코프로 찾아 나간뒤 가장 먼저 찾아진 것만 접근할 수 있는 개념. 이것이 스코프 체인이다.
  • 가장 먼저 찾아진 것만 접근할 수 있는 개념을 shadowing이라고 한다.
    

• 정리

  • Execution context는 함수를 실행할 때 필요한 환경정보를 담은 객체
    • 그 객체 안에는
      • Variable Environment
      • Lexical Environment
        • environmentRecord: 현재 문맥의 식별자(hoisting)
        • outerEnvironmentReference: 외부 식별자(scope chain)
      • this
        가 있다.

• 메모

  • 자바스크립트는 오직 함수에 의해서만 컨텍스트를 구분할 수 있다

참고

• 정재남님의 코어 자바스크립트 강의