[Modern javascript] 실행 컨텍스트(1)

ECMAScript 사양은 소스코드를 4가지로 구분하며 4가지 타입의 소스코드는 실행 컨텍스트를 생성하지만 과정과 관리 내용이 다르다.

• 전역 코드
  • 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성(전역 실행 컨텍스트 생성)
• 함수 코드
  • 지역 스코프를 생성하고 지역변수, 매개변수, arguments 객체를 관리
  • 지역 스코프를 전역 스코프의 스코프 체인에 연결하기 위해 함수 실행 컨텍스트가 생성
• eval 코드
  • strict mode에서 독자적인 스코프 생성(eval 실행 컨텍스트 생성)
• 모듈 코드
  • 모듈별로 독립적인 모듈 스코프 생성(모듈 실행 컨텍스트 생성)

 

■ 소스코드의 평가와 실행

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

 

- 소스코드 평가

실행컨텍스트 생성. 변수, 함수 등의 선언문만 실행하여 그 식별자를 실행 컨텍스트가 관리하는 스코프(렉시컬 환경의 환경 레코드)에 키로 등록한다.

 

- 소스코드 실행

런타임에 진행. 변수나 함수의 참조를 실행 컨텍스트가 관리하는 스코프에서 검색하여 취득한다. 변수 값의 변경 등의 실행 결과는 다시 실행 컨텍스트가 관리하는 스코프에 등록된다.

 

var x;
x = 1;

소스코드 평가 과정에서는 var x;를 먼저 실행하여 생성된 변수 식별자 x는 실행 컨텍스트가 관리하는 스코프에 등록되고 undefined로 초기화된다.

소스 코드 실행 과정에서는 x=1;이 실행된다. x가 이미 선언된 변수인지 실행 컨텍스트가 관리하는 스코프에 확인한 후 동작한다.

 

 

다음 예를 자세히 살펴보자.

// 전역 변수 선언
const x = 1;
const y = 2;

// 함수 정의
function foo(a) {
  // 지역 변수 선언
  const x = 10;
  const y = 20;

  // 메서드 호출
  console.log(a + x + y); // 130
}

// 함수 호출
foo(100);

// 메서드 호출
console.log(x + y); // 3

1. 전역 코드 평가

x, y, foo 식별자가 전역 스코프에 등록된다. (전역 객체의 프로퍼티와 메서드가 됨)

 

2. 전역 코드 실행

런타임에 코드가 실행된다.

 

3. 함수 코드 평가

함수 호출에 의해 실행 순서가 변경되어 함수 내부로 들어오면 매개 변수와 지역 변수 선언문이 먼저 실행되고, 실행 컨텍스트가 관리하는 지역 스코프에 등록된다. 또한 함수 내부에 지역 변수처럼 사용할 수 있는 arguments 객체가 생성되어 지역 스코프에 등록되고 this 바인딩도 결정된다.

 

4. 함수 코드 실행

함수 코드 평가 과정이 끝나면 런타임이 시작되어 코드가 실행된다.

=> console.log메서드를 호출하기 위해 식별자인 console을 스코프 체인에서 검색한다.

=> console 식별자는 스코프 체인에 등록되어 있지 않고 전역 객체의 프로퍼티로 존재한다.

=> 다음 log프로퍼티를 console객체의 프로토타입 체인을 통해 검색한다. 

 

이처럼 코드가 실행되려면 다음과 같이 스코프, 식별자, 코드 실행 순서 등의 관리가 필요하다.

- 선언에 의해 생성된 모든 식별자(변수, 함수, 클래스 등)를 스코프를 구분하여 등록하고 상태 변화를 지속적으로 관리할 수 있어야 한다.

- 스코프는 중첩 관계에 의해 스코프 체인을 형성해야 한다. 즉 스코프 체인을 통해 상위 스코프로 이동하여 식별자를 검색할 수 있어야 한다.

- 현재 실행 중인 코드의 실행 순서를 변경할 수 있어야 하며 다시 되돌아 갈 수 있어야 한다.

 

 

■ 소스코드의 평가와 실행

실행 컨텍스트는 스택 자료구조로 관리된다. 이를 실행 컨텍스트 스택 이라고 부른다.

이처럼 실행 컨텍스트 스택은 코드의 실행 순서를 관리한다.

실행 컨텍스트 스택의 최상위는 언제나 현재 실행중인 컨텍스트이다.

 

 

■ 렉시컬 환경

- 실행 컨텍스트 스택이 코드 실행 순서를 관리한다면 렉시컬 환경은 스코프와 식별자를 관리하는 컴포넌트이다.

- 식별자와 식별자에 바인딩된 값, 그리고 상위 스코프에 대한 참조를 기록하는 자료구조로 실행 컨텍스트를 구성하는 컴포넌트

 

const x = 1;

function foo() {
  const y = 2;
  console.log(x + y);
}

위 코드의 렉시컬 환경과 스코프 체인은 아래와 같다

Global Lexical Environment
x	1
foo	<function object>

↑(스코프 체인)

foo Lexical Environment
y	2

 

 

 

실행 컨텍스트는 LexicalEnvironment 컴포넌트와 VariableEnvironment 컴포넌트로 구성된다.

Execution Context
LexicalEnvironment
VariableEnvironment

 

두 컴포넌트는 Lexical Environment 컨텍스트를 가리키고 있으며 Lexical Environment 구성은 아래와 같다.

Lexical Environment
EnvironmentRecord
OuterLexicalEnvironmentReference

1. 환경 레코드

- 스코프에 포함된 식별자를 등록하고 등록된 식별자에 바인딩된 값을 관리하는 저장소. 환경 레코드는 소스코드의 타입에 따라 관리하는 내용이 차이가 있다.

 

2. 외부 렉시컬 참조

- 외부 렉시컬 환경에 대한 참조는 상위 스코프를 가리킨다. 이때 상위 스코프란 외부 렉시컬 환경, 즉 해당 실행 컨텍스트를 생성한 상위 코드의 렉시컬 환경을 말한다. 외부 렉시컬 환경에 대한 참조를 통해 단방향 링크드 리스트인 스코프 체인을 구현한다.