[JavaScript] 실행 컨텍스트

Joowon Jang·2024년 6월 28일

JavaScript

목록 보기

4/17

실행 컨텍스트 (Execution Context)

실행 컨텍스트란?

"실행할 코드에 제공할 환경 정보들을 모아놓은 객체"
실행 컨텍스트를 구성하는 과정에서 호이스팅, 외부 환경 정보 구성, this값 설정 등의 동작을 수행한다.

실행 컨텍스트를 구성하는 방법에는 전역공간, eval함수, 함수 호출 등이 있는데, 전역공간을 제외하면 일반적으로는 함수를 실행하는 것 뿐이다.

콜 스택(Call Stack)과 실행 컨텍스트

콜 스택: 실행 컨텍스트를 쌓아놓은 스택 자료구조

var a = 1;

function f1() {
  function f2() {
    console.log(a); // undefined
    var a = 2;
  }
  f2();
  console.log(a); // 1
}
f1();
console.log(a); // 1

우선, 위의 코드가 실행되는 과정을 그림으로 표현하면 아래와 같다.
(첫번째 console.log(a)에서 undefined가 출력되는 이유는 아래쪽에 정리한 호이스팅을 보면 이해할 수 있다.)

콜 스택

코드가 실행되면, 콜 스택에 전역 컨텍스트가 생성되고, 함수를 호출할 때마다 해당 함수의 실행 컨텍스트가 쌓였다가 함수가 종료되는 순간 사라진다.

어떤 실행 컨텍스트가 활성화될 때, 코드를 실행하는 데 필요한 환경 정보를 수집하는데, 수집하는 환경 정보에는 3가지가 있다.

Variable Environment
Lexical Environment
ThisBinding

Variable Environment

environmentRecord (snapshot)
outerEnvironmentReference (snapshot)

Lexical Environment에도 같은 정보가 담기지만,
Variable Environment의 정보들은 snapshot으로, 활성화 시에 수집한 정보가 그대로 유지되고,
Lexical Environment의 정보들은 코드가 실행됨에 따라 변한다.
(도중에 다른 함수가 실행되면 그 순간의 Lexical Environment를 새로 실행하는 함수의 outerEnvironmentReference가 참조함)

environmentRecord : 매개변수의 이름, 함수 선언, 변수명 등

outerEnvironmentReference : 실행 컨텍스트가 활성화될 시점에 콜 스택의 최상단에 있는 환경의 environmentRecord 정보 (말그대로 외부 환경을 참조)

Lexical Environment

environmentRecord

컨텍스트를 구성하는 함수에 지정된 매개변수 식별자, 선언한 함수가 있을 경우 그 함수 자체, var로 선언한 변수의 식별자 등을 수집한다.

호이스팅(Hoisting)

코드가 실행되기 전에 자바스크립트 엔진이 변수 정보를 수집하는 과정에서 해당 환경에 속한 코드의 변수명(식별자)들을 코드의 최상단으로 끌어올려놓고 실제 코드를 실행하는 것처럼 동작한다고 해석하는 가상의 개념

var로 선언한 변수를 선언부 위쪽에서부터 사용할 수 있는 이유가 호이스팅 때문이다.
호이스팅 과정에서는 식별자만 수집하기 때문에, 선언 전에 사용하게 되면 undefined가 나온다.
ES6에서 등장한 let, const로 선언한 변수도 호이스팅이 일어나지만 TDZ(Temporal Dead Zone)에 놓이게 된다. 이는 변수가 선언되기 전까지는 접근할 수 없다는 것을 의미한다. 즉, 선언 전에 사용하려고 하면 Reference Error가 발생한다.

outerEnvironmentReference

실행 컨텍스트가 활성화될 시점에 상위 컨텍스트의 LexicalEnvironment를 참조한다.

스코프(Scope)

식별자에 대한 유효범위. 어떤 경계 A의 외부에서 선언한 변수는 A의 내부에서도 접근이 가능하지만, 경계 A의 내부에서 선언한 변수는 외부에서는 접근할 수 없다.

스코프 체인(Scope Chain)

스코프에서 식별자를 찾지 못할 경우, 상위 스코프(현재 실행 컨텍스트의 outerEnvironmentReference)에서 찾게 되는데, 찾을 때까지 계속해서 상위 스코프를 탐색하고, 가장 먼저 발견된 식별자에 접근하게 된다.

var는 함수 스코프를 가지기 때문에 함수가 실행, 종료될 때에만 실행 컨텍스트를 갱신하지만,
ES6 이후의 let, const는 블록 스코프를 가지기 때문에 한 블록({})이 실행, 종료될 때마다 var보다 더 많이 실행 컨텍스트를 갱신하게 됨.
ex) for문, if문