💻 실행컨텍스트(JavaScript)

⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다.

실행컨텍스트

실행 컨텍스트는 자바스크립트 코드를 실행할 때 필요한 정보들을 저장하고 제공하는 환경이다. 즉, 스코프의 정보를 담은 환경을 의미한다.

현재 실행되고 있는 컨텍스트에서 이 컨텍스트와 관련이 없는 코드가 실행된다면 새로운 컨텍스트가 생성되어 제어권을 간다. 그리고 이렇게 생성된 컨텍스트들은 실행 컨텍스트 스택 안에 쌓이게 된다. 각각의 컨텍스트는 실행이 종료된 이후 소멸되며, 소멸된 후 이전의 실행 컨텍스트에 제어권을 넘겨주게 된다.

실행 컨텍스트의 구성 요소

실행 컨텍스트는 Lexical Environment와 Variable Environment 두가지 컴포넌트로 구성된다. 그리고 이 컴포넌트들은 Environment Records라 불리는 형태로 구성되어 있다.

ES2015부터 변경사항

• ES5에서는 실행 컨텍스트에 this바인딩 정보가 별도로 저장되었지만 ES2015부터는 EnvorinmentRecords에서 this바인딩에 대한 정보를 저장
• 기존 ES2015에서는 Lexical Environment: ER + LE 로 저장되어있었지만 현재 명세에서는 EnvironmentRecords에서 식별자, this 바인딩, 상위 ER에 대한 참조까지 저장
• LE와 VE가 ER 자체를 바인딩 하는 형태로 변경됨
  

function foo() {
  let a = 1;
  const b = 2;
  var c = 3;

  console.log(a + b + c);
}
foo();

foo 실행 컨텍스트의 LE와 VE는 foo함수 호출에 대한 정보를 담고 있다. 선언한 식별자와 this바인딩 그리고 상위 스코프인 전역 실행 컨텍스트의 GlobalER을 참조하는 외부 환경 레코드에 대한 정보를 갖는다.

Environment Records와 스코프 체인

ER은 렉시컬 스코프를 기반으로 특정 변수와 함수에 대한 식별자의 연결 정보를 저장한다. 모든 ER에는 OuterEnv 필드가 있으며, 이 필드는 상위 스코프에 대한 ER을 참조한다.

스코프 체인이란 용어는 ES3이후로 사용하지 않는 용어, 그렇지만 직관적인 이해를 돕기 위해서 자주 사용되는 듯 함. Lexical Environment 개념이 도입된 이후 ECMAScript에는 lexical nesting structure 용어를 사용

Environment Records의 하위 ER

1. declarative Environment Record - 변수, 상수, 모듈, 클래스 등 렉시컬 스코프 내에 선언된 식별자들을 바인딩
   1. function Environment Record
      • 함수에서 사용되는 this값과 new.target에 대한 정보를 가진다. 화살표 함수가 아닌 경우에만 this를 바인딩하며, super로 상위 클래스에 대한 정보를 바인딩한다.
   2. module Environment Record
      - 모듈의 외부 스코프를 나타내는 정보를 추가적으로 바인딩한다. 다른 ER에 존재하는 식별자에 간접적으로 접근할 수 있는 가져오기(import) 바인딩을 제공한다.
2. object Environent Record
   • binding object라는 객에츼 프로퍼티들을 식별자로 바인딩한다.
3. global Environment Record
   • 최상위 스코프에 선언된 식별자들과 전역 객체를 바인딩한다.
   • declarative ER + objectER 형태로 object ER은 binding object를 통해 내장 전역 객체와 var 키워드로 선언된 변수 등을 참조 가능하며 이것이 window로 접근하는 전역 객체이다. 그 외 나머지 식별자들은 declarative ER에 저장하며 이는 전역 변수라 부른다.

Lexical Environment와 Variable Environment

var 키워드로 선언된 변수의 바인딩은 VE를 통해 찾고, 이외의 식별자들은 LE를 통해 찾는다.

실행 컨텍스트의 생성 과정

    function foo() {
      let x = 1;
      function bar() {
        const y = 2;
        var z = 3;
        console.log(x + y + z); // 6
      }
      bar();
    }
    foo();

1. 전역 컨텍스트 생성과 바인딩

• 가장 먼저 전역 컨텍스트가 스택 메모리에 추가되며 Global ER이 생성됨.
• Global ER은 this와 outerEnv필드만 설정되고 이후 foo함수 선언문을 바인딩한다.

2. foo 컨텍스트 생성과 바인딩

• foo 함수를 호출하여 새로운 foo 실행 컨텍스트가 되어 제어권을 가져간다.
• foo 실행 컨텍스트도 마찬가지로 LE와 VE로 구성이 되고 OuterEnv로 상위 렉시컬 스코프가 Global ER이므로 이로 정해진다.
• 이후 식별자들과 this가 순차적으로 바인딩 된다.(소스 평가 과정)

3. bar 컨텍스트 생성과 바인딩

• bar 컨텍스트도 호출과 함께 생성된다.
• const 로 선언한 변수는 LE에 var로 선언한 변수는 VE에 바인딩 된다.

🔥 느낀점

실행컨텍스트에 대해서 그동안 계속 공부를 하였지만 제대로 이해하지 못했었다는 생각을 이번에 다시 공부하면서 깨달았다.
확실히 개념 하나하나를 다시 되짚어 보았더니 실행 컨텍스트가 이렇게 동작하는구나하고 흐름을 알게되었다. 그동안 공부했다고 하면서 제대로 이해하지 못했구나 싶었다. 앞으로 더 많은 개념들을 안다고 확신하지 말고 반복해서 공부해야겠다.~0~

ref

• 기초부터 완성까지 프론트엔드 - 이재성, 한정 지음
• 코드 실행에 필요한 정보를 담은 실행 컨텍스트