자바스크립트 실행 컨텍스트

실행 컨텍스트(Execution Context)

ECMAScript 스펙에 따르면 실행 컨텍스트를 실행 가능한 코드를 형상화하고 구부하는 추상적인 개념이라고 정의합니다. 말만 들으면 솔직히 바로 이해가 안됩니다.

쉽게 말하면 코드들이 실행되기 위한 환경이라고 이해하면 된다고 합니다. 코드가 실행되면 이 실행 컨텍스트 내부에서 실행되고 있는 것입니다.

자바스크립트 엔진은 코드를 실행하기 위해 아래와 같은 실행에 필요한 정보들을 알고 있어야 합니다.

• 변수 : 전역변수, 지역변수, 매개변수, 객체의 프로퍼티
• 함수 선언
• 변수의 유효범위(scope)
• this

이와 같이 실행에 필요한 정보를 형상화하고 구분하기 위해 자바스크립트 엔진은 실행 컨텍스트를 물리적 객체의 형태로 관리합니다.

var x = 'xxx';

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

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

위 코드를 실행하면 아래와 같이 실행 컨텍스트 스택이 생성하고 소멸합니다.

실행 컨텍스트의 3가지 객체

실행 컨텍스트는 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이지만 물리적으로는 객체의 형태를 가지며 3가지 프로퍼티를 소유합니다.

Variable Object(VO/변수객체)

실행 컨텍스트가 생성되면 엔진은 실행에 필요한 여러 정보들을 담을 객체를 생성합니다. 이를 VO라고 합니다. VO는 코드가 실행될 때 엔진에 의해 참조되며 코드에서는 접근할 수 없습니다.

VO는 아래의 정보를 담고 있습니다.

• 변수
• 매개변수와 인수 정보
• 함수 선언

VO는 실행 컨텍스트의 프로퍼티이기 때문에 값을 갖는데 이 값은 다른 객체를 가리킵니다. 전역 코드 실행시 생성되는 전역 컨텍스트와 함수를 실행할 때 생성되는 함수 컨텍스트의 경우 가리키는 객체가 다릅니다. 그 이유는 전역 코드와 함수의 내용이 다르기 때문입니다.

VO가 가리키는 객체는 아래와 같습니다.

전역일 경우

VO는 유일하며 최상위 위치하고 모든 전역 변수, 함수 등을 포함하는 전역 객체(GO)를 가리킵니다. 전역 객체는 전역에 선언된 전역 변수와 전역 함수를 프로퍼티로 소유합니다.

함수일 경우

VO는 활성객체(AO)를 가리키며 매개변수와 인수들의 정보를 배열의 형태로 담고 있는 arguments object가 추가됩니다.

Scope Chain

스코프 체인은 일종의 리스트라고 생각하면 됩니다. 전역 객체와 중첩된 함수의 스코프의 레퍼런스를 차례대로 저장하고 있습니다. 다시 말하자면 해당 전역 또는 함수가 참조할 수 있는 변수, 함수 선언 등의 정보를 담고 있는 GO 또는 AO 리스트를 가리킵니다.

스코프 체인은 식별자 중에서 객체(전역 객체 제외)의 프로퍼티가 아닌 식별자, 즉 변수를 검색하는 메커니즘이다.
식별자 중에서 변수가 아닌 객체의 프로퍼티(물론 메소드도 포함된다)를 검색하는 메커니즘은 프로토타입 체인(Prototype Chain)이다.

this

this 프로퍼티에는 this 값이 할당됩니다. this에 할당되는 값은 함수 호출 패턴에 의해 결정됩니다.

실행 컨텍스트 생성 과정

아래의 코드를 가지고 어떻게 생성되는지 알아보겠습니다.

var x = 'xxx';

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

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

foo();

1. 전역 코드에의 진입

컨트롤이 실행 컨텍스트에 진입하기 전에 유일한 전역 객체가 생성됩니다. 전역 객체는 단일 사본으로 존재하며 이 객체의 프로퍼티는 어떠한 곳에서도 접근할 수 있습니다. 초기 상태의 전역 객체는 빌트인 객체와 DOM, BOM이 설정되어 있습니다.

전역 객체가 생성된 이후, 전역 코드로 컨트롤이 진입하면 전역 실행 컨텍스트가 생성되고 실행 컨텍스트 스택에 쌓입니다.

그리고 이후 이 실행 컨텍스트를 바탕으로 이하의 처리가 실행됩니다.

1. 스코프 체인의 생성과 초기화
2. Variable Instantiation(변수 객체화)실행
3. this value 결정

1.1 스코프 체인의 생성과 초기화

실행 컨텍스트가 생성된 이후 스코프 체인의 생성과 초기화가 실행됩니다. 이때 스코프체인은 전역 객체의 레퍼런스를 포함하는 리스트가 됩니다.

1.2 Variable Instantiation(변수 객체화)실행

스코프 체인의 생성과 초기화가 종료되면 변수 객체화가 실행됩니다.

변수 객체화는 VO에 프로퍼티와 값을 추가하는 것을 의미합니다. 전역 코드의 경우 VO는 GO를 가리킵니다.

아래의 순서로 VO에 프로퍼티와 값을 set합니다.(반드시 1->2->3 수서로 실행됩니다.)

1. (Function code일 경우)매개변수가 VO의 프로퍼티로 인수가 값으로 설정됩니다.
2. 대상 코드 내의 함수 선언을 대상으로 함수명이 VO의 프로퍼티로 생성된 함수 객체가 값으로 설정됩니다.(함수 호이스팅)
3. 대상 코드 내의 변수 선언을 대상으로 변수명이 VO의 프로퍼티로 undefined가 값으로 설정됩니다.(변수 호이스팅)

1.2.1 함수 foo의 선언 처리

함수 선언은 변수 객체화 실행 수서 2.와 같이 선언된 함수명 foo가 vo의 프로퍼티로 생성된 함수객체가 값으로 설정됩니다.

생성된 함수 객체는 [[scopes]]프로퍼티를 가지게 됩니다. [[scopes]] 프로퍼티는 함수 객체만이 소유하는 내부 프로퍼티로서 함수 객체가 실행되는 환경으 가리킵니다. 따라서 현재 실행 컨텍스트의 스코프 체인이 차조하고 있는 객체를 값으로 설정합니다. 내부 하무의 [[scopes]] 프로퍼티는 자신의 실행환경과 자신을 포함하는 외부 함수의 실행환경과 전역 객체를 가리키는데 이때 자신을 포함하는 외부 하수의 실행 컨텍스트가 소멸하여도 [[scopes]] 프로퍼티가 가리키는 외부 함수의 실행 환경은 소멸하지 않고 차조할 수 있습니다. 이것이 클로저입니다.

![함수 foo의 [[Scopes]]](https://poiemaweb.com/img/foo-scopes.png)

1.2.2 변수 x의 선언 처리

1.3 this value 결정

this value가 결정되기 이전에 this는 전역 객체를 가리키고 있다가 함수 호출 패턴에 의해 this에 할당되는 값이 결정됩니다. 전역 코드의 경우, this는 전역 객체를 가리킵니다.

2. 전역 코드의 실행

2.1 변수값의 할당

전역 변수 x에 문자열 xxx를 할당할 때, 현재 실행 컨텍스트의 스코프 체인이 차조하고 있는 VO를 선두부터 검색하여 변수명에 해당하는 프로퍼티가 발견되면 값을 할당합니다

2.2 함수 foo의 실행

전역 코드의 함수 foo가 실행되기 시작하면 새로운 함수 실행 컨텍스트가 생성됩니다. 함수 foo의 실행 컨텍스트로 컨트롤이 이동하면 전역코드의 경우와 마찬가지로 1. 스코프 체인의 생성과 초기화, 2. 변수 객체화 실행, 3. this value 결정이 순차적으로 실행됩니다.

이 때 1,2,3의 과정에 함수 코드의 룰이 적용됩니다.

3. foo 함수 코드의 실행

똑같이 변수 값 할당, 내부 함수 실행 순으로 진행됩니다.

이 단계에서 console.log(x + y + z); 구문의 실행 결과는 xxxyyyzzz가 된다.

• x : AO-2에서 x 검색 실패 → AO-1에서 x 검색 실패 → GO에서 x 검색 성공 (값은 ‘xxx’)
• y : AO-2에서 y 검색 실패 → AO-1에서 y 검색 성공 (값은 ‘yyy’)
• z : AO-2에서 z 검색 성공 (값은 ‘zzz’)