JS NORMAL | 실행 컨텍스트

❓ 실행 컨텍스트 (Execution Context)

• 자바스크립트 엔진은 코드를 실행하기 위해서 실행에 필요한 여러가지 정보들을 알고 있어야 한다. 예시) 변수(전역, 지역, 매개변수 등)와 변수의 유효 범위(스코프), this...
• 어떤 실행 컨텍스트가 활성화될 때, 자바스크립트 엔진은 해당 컨텍스트의 코드를 실행하는데 필요한 환경 정보들을 수집해서 실행 컨텍스트에 저장한다.
• 실행 컨텍스트란 코드가 실행되기 위해 필요한 정보들을 가진 범위를 추상화하기 위해 객체 형태로 나타낸 것을 말한다.
• 자바스크립트의 동적 언어로서의 특징을 잘 보여준다.

💻 실행 컨텍스트 종류

전역 실행 컨텍스트

• 모든 스크립트 코드는 전역 실행 컨텍스트 안에서 실행된다.
• 프로그램에 단 한 개만 존재하며 실행 컨텍스트의 기본이다.
• 함수 밖에 있는 코드는 전역 실행 컨텍스트에 있다.
• 브라우저의 경우에는 window객체, Node.js의 경우엔 global객체가 곧 전역 실행 컨텍스트가 된다.

함수 실행 컨텍스트

• 함수가 실행될 때마다 만들어지는 실행 컨텍스트이다.
• 각 함수는 고유의 실행 컨텍스트를 가지며, 함수가 실행되거나 call될 때에만 생성된다.

eval() 실행 컨텍스트

• eval 함수로 실행되는 코드
• 속도와 보완이 좋지 않아 잘 사용하지 않는다.

블록문 실행 컨텍스트

• ES6 이후 추가된 실행 컨텍스트

💻 실행 컨텍스트 생성

실행 컨텍스트는 동일한 환경에 있는 코드들을 실행할 때 (선언할 때 x) 필요한 환경 정보들을 모아 객체를 구성하고, 이를 콜 스택에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다.

실행 컨텍스트 작동 과정

var x = 'xxx';

function foo () {
  var y = 'yyy';

  function bar () {
    var z = 'zzz';
    console.log(x + y + z);
  }
  
  bar();
}

foo();

1. 처음 코드가 실행될 때 전역 컨텍스트가 call stack에 담긴다. (파일 열림 → 자동 실행 → 전역 컨텍스트 활성화)

2. 전역 컨텍스트의 코드가 순차적으로 실행되다가 함수를 만나면 해당 함수에 대한 환경 정보를 수집하여 실행 컨텍스트를 생성한 후 call stack에 쌓는다.

3. 전역 컨텍스트와 관련된 코드 실행을 중지하고 해당 함수와 관련된 코드를 순차적으로 실행한다.

4. 함수의 실행이 종료되면 a 함수는 call stack에서 제거되고, 중단했던 부분부터 이어서 실행한다.

5. 전역 공간에 실행할 코드가 남아있지 않다면 콜스택에서 전역 컨텍스트 또한 제거되며 콜스택에 아무 것도 남지 않은 상태로 종료된다.
   

💻 실행 컨텍스트 구성

VariableEnvironment

• 컨텍스트 내부의 식별자 정보(environmentRecord) + 외부 환경 정보(outerEnvironmentReference)
• 선언 시점의 LexicalEnvironment의 스냅샷으로 초기 상태 저장 (변경 사항 반영 x)

environmentRecord

• 함수가 실행되기 전 현재 컨텍스트와 관련된 코드의 식별자 정보(매개변수 식별자, 선언된 함수, var로 선언된 변수명 등)가 저장된다.
• 코드가 실행되기 전에 자바스크립트 엔진은 이미 해당 환경에 속한 코드의 변수명 등을 모두 알 수 있다. → 호이스팅의 개념

outerEnvironmentReference (outer)

• 현재 environment record보다 바깥에 있는 environment record를 참조하는 포인터.
• 어떤 변수에 접근할 때 선언 시점이 발견될 때까지 컨텍스트의 LexicalEnvironment를 계속 찾아 올라간다. (없으면 undefined 반환)
• 해당 함수가 속한 상위 스코프의 범위

LexicalEnvironment

• 최신 상태 기억
• 초기에는 VariableEnvironment 상태를 복사해와 변경 사항을 실시간으로 적용하여 저장

ThisBinding

this 식별자가 바라봐야 할 대상 객체




참고: 자바스크립트의 실행 컨텍스트 (execution context)
실행 컨텍스트란 무엇인가요?