Chapter 23

23.1 소스코드의 타입

1. 전역 코드

최상위 스코프인 전역 스코프를 생성한다. var 키워드로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수를 전역 객체와 연결한다.

2. 함수 코드

함수 코드는 지역 스코프를 생성하고, 지역 스코프를 전역 스코프에서 시작하는 스코프 체인의 일원으로 연결한다.

3. eval 코드

strict mode에서 자신만의 독자적인 스코프를 생성한다.

4. 모듈 코드

모듈별로 독립적인 모듈 스코프를 생성한다.

23.2 소스코드의 평가와 실행

자바스크립트 엔진은 소스코드를 평가와 실행 과정으로 나누어서 처리한다.

• 평가 과정에선 실행 컨텍스트 생성, 변수, 함수등의 선언문을 실행하여 변수와 함수 식별자를 실행 컨텍스트의 렉시컬 환경의 환경 레코드에 등록한다.
• 평가 이후 선언문을 제외한 소스코드가 실행(런타임)된다. 실행에 필요한 정보(변수나 함수의 참조)들이 실행 컨텍스트 스코프 내에서 검색하여 취득된다. 실행 결과는 스코프에 반영된다.

23.3 실행 컨텍스트의 역할

자바스크립트 엔진의 코드 평가 단계다.

1. 전역 코드 평가

선언문만 먼저 실행한다. 즉, 변수와 함수 선언문이 실행 컨텍스트의 전역 스코프에 등록된다. var로 선언한 변수와 함수 선언문으로 정의된 함수는 전역 객체의 프로퍼티와 메소드가 된다.

2. 전역 코드 실행

런타임이 시작되어 전역 코드가 순차적으로 실행된다.

3. 함수 코드 평가

매개변수와 지역 변수 선언문이 실행되고, 생성된 매개변수와 지역 변수가 실행 컨텍스트가 관리하는 지역 스코프에 등록된다. arguments 객체도 등록되고, this 바인딩도 결정된다.

4. 함수 코드 실행

함수 코드가 순차적으로 실행된다. 매개변수와 지역 변수에 값이 할당되고 메서드가 호출된다. 코드 내부의 식별자는 스코프 체인을 통해 검색한다.

코드가 호출되려면 스코프를 구분하여 식별자와 바인딩된 값이 관리되어야 하고, 중첩 관계에 의해 스코프 체인을 형성하여 식별자를 검색할 수 있어야 하고, 전역 객체의 프로퍼티도 전역 변수처럼 검색할 수 있어야 한다.

실행 컨텍스트는 식별자를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘으로, 모든 코드는 이를 통해 실행되고 관리한다.

23.4 실행 컨텍스트 스택

실행 컨텍스트 스택은 코드의 실행 순서를 관리한다. 코드를 실행하면 코드가 실행되는 시간의 흐름에 따라 실행 컨텍스트 스택에는 실행 컨텍스트가 추가되고 제거된다.

23.5 렉시컬 환경

실행 컨텍스트 객체는 총 3가지로 구성된다.

1. VariableEnvironment : environmentRecord와 outerEnvironmentReference 정보를 가지고 있다. 실행 컨텍스트 초기 생성시 LexicalEnvironment의 스냅샷으로, 변경사항은 반영되지 않는다.

   • environmentRecord (현재 컨텍스트 내의 식별자들에 대한 정보)
   • outerEnvironmentReference (외부 렉시컬 환경에 대한 참조)

2. LexicalEnvironment : 실행 초기엔 VariableEnvironment와 구성이 같지만 변경사항이 실시간으로 반영된다.

3. ThisBinding : this 식별자가 바라보고 있는 대상을 가리킨다.

23.6 실행 컨텍스트의 생성과 식별자 검색 과정

var x = 1;
const y = 2;

function foo (a) {
  var x = 3;
  const y = 4;

  function bar (b) {
    const z = 5;
    console.log(a + b + x + y + z);
}
  bar(10);
}

foo(20);

위 예제로 어떻게 실행 컨텍스트 생성가 코드 실행 결과 관리하는지, 식별자를 검색하는지 알아보자

23.6.1 전역 객체 생성

전역 객체도 Object.prototype을 상속받는다. 즉, 프로토타입 체인의 일원이다.

23.6.2 전역 코드 평가

1. 전역 실행 컨텍스트 생성

빈 전역 실행 컨텍스트를 생성하여 실행 컨텍스트 스택에 푸시한다.

2. 전역 렉시컬 환경 생성

전역 렉시컬 환경을 생성하고 전역 실행 컨텍스트에 바인딩 한다.

2.1 전역 환경 레코드 생성

전역 환경 레코드는 객체 환경 레코드와 선언적 환경 레코드로 구성되어 있다.

• 전역 코드 평가 과정에서 var 키워드로 선언한 전역 변수와 함수 선언문으로 정의된 전역 함수는 전역 환경 레코드의 객체 환경 레코드에 연결된 BindingObject(생성된 전역 객체)를 통해 전역 객체의 프로퍼티와 메서드가 된다.

• let,const 키워드로 선언한 전역 변수는 선언적 환경 레코드에 등록되고 관리된다. let const는 블록 레벨 스코프인데 여기서의 블록이 선언적 환경 레코드다. 그림처럼 전역변수 y는 전역 객체의 프로퍼티가 되지 않기 때문에 런타임에 실행 흐름이 변수 선언문에 도달하기 전까지 일시적 사각지대(TDZ)에 빠진다.

2.2 this 바인딩

전역 환경 레코드의 [[GlobalThisValue]] 내부 슬롯에 this가 바인딩된다.

2.3 외부 렉시컬 환경에 대한 참조 결정

전역 코드를 포함하는 소스코드는 없으므로 외부 렉시컬 환경에 대한 참조에 null이 할당된다.

23.6.3 전역 코드 실행

변수 할당문이 실행되어 전역 변수 x,y에 값이 할당되고, foo함수가 호출된다. 변수 할당문과 함수 호출문을 실행하려면 변수나 함수 이름이 선언된 식별자인지 확인하는 식별자 결정을 거친다. 식별자 결정을 위해 식별자를 검색할 때 현재 실행중인 실행 컨텍스트에서 식별자를 검색하기 시작한다. 실행 중인 렉시컬 환경에서 식별자를 검색할 수 없으면 외부 렉시컬 환경에 대한 참조가 가리키는 상위 스코프로 이동해서 식별자를 검색한다.

23.6.4 foo 함수 코드 평가

foo 함수가 호출되면 전역 코드의 실행을 일시 중단하고 foo 함수 내부로 코드의 제어권이 이동한다.

1. 함수 실행 컨텍스트 생성

foo 함수 실행 컨텍스트를 생성하여 실행 컨텍스트 스택에 푸시한다.

2. 함수 렉시컬 환경 생성

foo 함수 렉시컬 환경을 생성하고 foo 함수 실행 컨텍스트에 바인딩 한다.

2.1 함수 환경 레코드 생성

함수 환경 레코드는 매개변수, arguments 객체, 함수 내부에서 선언한 지역 변수와 중첩 함수를 등록하고 관리한다.

2.2 this 바인딩 및 외부 렉시컬 환경에 대한 참조 결정

함수 환경 레코드의 [[ThisValue]] 내부 슬롯에 this가 바인딩된다. foo 함수는 일반 함수로 호출 되었으므로 this는 전역 객체를 가리킨다.

foo 함수는 전역 함수기 때문에 foo 함수 정의는 전역 코드 평가 시점에 평가된다. 즉, 외부 렉시컬 환경에 대한 참조에는 전역 렉시컬 환경의 참조가 할당된다. 자바스크립트는 함수를 어디서 호출했는지가 아니라 어디에 정의했는지에 따라 상위 스코프를 결정한다.
함수 렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 할당되는 것은 바로 함수의 상위 스코프를 가리키는 함수 객체의 내부 슬롯 [[Environment]]에 저장된 렉시컬 환경의 참조다.

23.6.5 foo 함수 코드 실행

식별자 결정을 위해 식별자를 검색할 때 현재 실행중인 실행 컨텍스트의 렉시컬 환경에서 식별자를 검색하기 시작한다.

23.6.6 bar 함수 코드 평가 및 실행

bar 함수가 호출되면 전역 코드의 실행을 일시 중단하고 bar 함수 내부로 코드의 제어권이 이동한다. 렉시컬 환경 생성 과정은 foo 함수와 동일하다.

각 지역변수에 값을 할당한 뒤, console 식별자를 찾아 상위 스코프로 이동한다. console 식별자는 BindingObject를 통해 전역 객체에서 찾을 수 있다.
그 후, console 객체에서 log 메서드를 검색한다.
최종적으로, a + b + x + y + z를 평가하기 위해 각 식별자를 현재 실행 컨텍스트와 상위 스코프의 실행 컨텍스트에서 검색한다. 평가를 완료하면 값을 console.log 메서드에 전달하여 호출한다.

23.6.7 bar 함수 코드 실행 종료

bar 함수 실행 컨텍스트가 팝되어 제거되고 foo 함수 실행 컨텍스트가 현재 실행 중인 실행 컨텍스트가 된다.
bar 함수 실행 컨텍스트가 소멸되어도 bar 함수 렉시컬 환경을 누군가 참조하고 있다면 bar 함수 렉시컬 환경은 소멸하지 않는다.(클로저와 이어지는 개념)

23.6.8 foo 함수 코드 실행 종료

bar 함수 실행 컨텍스트가 팝되어 제거되고 foo 함수 실행 컨텍스트가 현재 실행 중인 실행 컨텍스트가 된다.

23.6.9 전역 코드 실행 종료

foo 함수 실행 컨텍스트가 팝되어 제거되고 전역 실행 컨텍스트가 현재 실행 중인 실행 컨텍스트가 된다. 실행 컨텍스트 스택은 비게 된다.

23.7 실행 컨텍스트와 블록 레벨 스코프

let x = 1;

if (true) {
  let x = 10;
  console.log(x); // 10
}

console.log(x); // 1

if 문 코드 블록의 실행이 종료되면 if 문의 코드 블록이 실행되기 이전의 렉시컬 환경으로 되돌린다.

for 문의 변수 선언문에 let 키워드를 사용한 for 문은 코드 블록이 반복해서 실행될 때마다 코드 블록을 위한 새로운 렉시컬 환경을 생성한다.