[Today I Read | 코어 자바스크립트] 02 실행 컨텍스트

suwoncityboyyy·2023년 4월 17일
0

Today I Read

목록 보기
3/6

실행컨텍스트??

실행할 코드에 제공할 환경정보들을 모아놓은 객체이다.쉽게 말하면, 자바스크립트 엔진에 의해 만들어지고 사용되는 코드 정보를 담은 객체의 집합이다.

종류

js의 코드는 3가지 종류로 이어지는데 글로벌 스코프에서 실행하는 글로벌코드, 함수 스코프에서 실행하는 함수코드, 그리고 eval()로 실행되는 코드가 있다. 이 각각의 코드들은 자신만의 실행컨텍스트를 생성한다.

엔진이 스크립트 파일을 실행 하기전에 글로벌 실행 컨텍스트(Global Execution Context, GEC)가 생성이 되고, 함수를 호출할 때 마다 함수 실행 컨텍스트(Function Execution Context, FEC)가 생성된다. 주의할 점은 글로벌(GEC)의 경우 실행 이전에 생성 되지만 함수(FEC)의 경우 호출할 때 생성된다는 점이다.

실행 컨텍스트 스택 (Execution Context Stack)

js는 실행 컨텍스트가 활성화 되면 흔히 콜스택(call stack)이라고 불리는 실행 컨텍스트 스택에 쌓이게 된다.GEC(글로벌 실행 컨텍스트)는 코드를 실행하기전에 쌓이고 모든 코드를 실행하면 제거된다. FEC(함수 실행 컨텍스트)는 호출 할 때 쌓이고 호출이 끝나면 제거된다.밑에 예시코드를 통해 살펴보자!!

function func() {
  console.log('함수 실행 컨텍스트');
}
console.log('글로벌 실행 컨텍스트');
func();

제일 처음, 코드를 실행하기 전에 callstack에 GEC가 쌓이고 코드를 실행하면서 콘솔에 "글로벌 실행 컨텍스트" 가 출력된다.그 다음 func()을 호출하고 그에 대한 FEC가 만들어져 쌓이고 FEC를 실행하며 콘솔에 "함수 실행 컨텍스트" 가 출력된다.이후 func()가 종료되고 FEC가 스택에서 제거된 후, 모든 코드의 실행이 끝나면서 GEC가 스택에서 제거된다

실행 컨텍스트 구성요소 3가지

  • LexicalEnvironment
  • VariableEnvironment
  • this바인딩

Lexical Environment (렉시컬환경)

Lexical Environment 는 변수 및 함수 등의 식별자(Identifier) 및 외부 참조에 관한 정보를 가지고 있는 컴포넌트이다.이 컴포넌트는 2개의 구성요소를 갖는다.1. Environment Record현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장된다.environmentRecord로 인하여 호이스팅이 발생한다.2. Outer 참조outer 참조로 인하여 스코프와 스코프 체인이 형성 된다.

Variable Environment

VariableEnvironment에 담기는 내용은 LexicalEnvironment와 같지만, 최초 실행 시의 스냅샷을 유지한다. 실행 컨텍스트를 생성할 때 VariableEnvironment에 정보를 먼저 담은 다음, 이를 복사해서 LexicalEnvironment를 만든다.주로 활용하는 것은 LexicalEnvironment이다. 즉, VariableEnviroment는 스냅샷 유지를 목적으로 사용한다.

this 바인딩

this의 바인딩은 실행 컨텍스트가 생성될 때 마다 this 객체에 어떻게 바인딩이 되는지를 나타내는 것이다. (ES6부터 this의 바인딩이 LexicalEnvironment 안에 있는 EnvironmentRecord 안에서 일어난다는 사실을 기억해두도록 하자. 그렇게 중요하진 않으니 알고만 있자.)

  • GEC(글로벌 실행 컨텍스트) 의 경우
    • strict mode라면 undefined 로 바인딩된다.
    • 아니라면 글로벌 객체로 바인딩된다. (브라우저에선 window, 노드에선 global)
  • FEC(함수 실행 컨텍스트) 의 경우
    • 해당 함수가 어떻게 호출되었는지에 따라 바인딩된다.

렉시컬환경의 environmentRecord와 호이스팅(hoisting)

자바스크립트는 코드를 실행하기전에 식별자를 수집한다.코드가 실행 되기 전에 자바스크립트의 엔진은 이미 실행 컨텍스트에 속한 변수명들을 모두 알고 있게 되는 셈이다. (호이스팅 때문에)엔진의 실제 동작 방식 대신에 "자바스크립트 엔진은 식별자들을 최상단으로 끌어올려놓은 다음, 실제 코드를 실행한다" 라고 생각해도 코드 해석에 문제되는 것이 없기 때문이다.

function a () {
  console.log(b);
  var b = 'bbb';
  console.log(b);
  function b () {};
  console.log(b);
}
a();

=============================================================

function a () {
  var b;
  function b () {};

  console.log(b); // f b () {}
  b = 'bbb';
  console.log(b); // bbb
  console.log(b); // bbb
}
a();
profile
주니어 개발자 기술노트

0개의 댓글