[Javascript] 실행 컨텍스트 (Execution Context) 와 소스코드

이전에 Javascript 에서의 this 를 다뤘던 글에서 잠깐 "실행 컨텍스트"를 언급했었다. Javascript 에는 (그리고 아마 대부분의 프로그래밍 언어에는) 실행 컨텍스트라는 개념이 존재하는데, 이를 잘 이해하기 위해서는 우선 "소스코드" 의 개념부터 이해해야 한다. 

 

✨  소스코드 

ECMAScript 는 소스코드를 4가지 타입으로 구분한다. 소스코드는 타입마다 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르며, 이를 간략히 요양한 내용은 다음과 같다. 

 

📍 전역 코드 (Global code)

: 전역에 존재하는 코드 (함수, 클래스의 내부 코드 미포함)

1. 전역 스코프 (최상위 스코프) 생성

2. 전역 객체와 연결

3. var 키워드로 선언된 전역 변수 + 선언된 전역 함수를 전역 객체의 프로퍼티와 메서드로 바인딩

 

📍 함수 코드 (Function code)

: 함수 내부에 존재하는 코드 (중첩 함수, 클래스의 내부 코드 미포함) 

1. 지역 스코프 생성

2. 지역 스코프를 전역 스코프에서 시작하는 스코프 체인의 일원으로 연결

3. 지역 변수, 매개변수, arguments 객체 관리

 

📍 Eval 코드 (Eval code)

: Eval 함수 (빌트인 전역 함수) 의 인자로 전달되어 실행되는 코드

1. strict mode 에서 독자적인 스코프 생성 

 

📍 모듈 코드 (Module code)

: 모듈 내부에 존재하는 코드 (함수, 클래스의 내부 코드 미포함)

1. 독립적인 모듈 스코프 생성 

 

소스코드마다 자신의 스코프를 가장 먼저 생성하는 것을 확인할 수 있다. 그러나 스코프의 생성을 위해 우선 각 소스코드가 '평가'되어야 한다.

 

 

✨  소스코드의 평가, 실행

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

 

1. 평가 과정

- 실행 컨텍스트 생성

- 변수, 함수 (선언문) 먼저 실행

- 생성된 식별자를 실행 컨텍스트가 관리하는 스코프에 등록 

 

2. 실행 과정 

- 평가 이후 소스코드가 순차적으로 실행 (선언문 제외) === 런타임 시작 

- 소스코드 실행에 필요한 정보는 (변수 등) 실행 컨텍스트가 관리하는 스코프에서 검색해서 취득 

- 소스코드의 실행 결과 (변수값 변경 등)를 실행 컨텍스트가 관리하는 스코프에 등록 

 

예를 들어, 다음과 같은 코드가 있다고 하자. 

 

var x;
x = 'hello';

 

1. 우선, JS 엔진은 소스코드를 평가한다.

2. 평가 시 실행 컨텍스트를 생성하고, 선언문인 var x; 를 실행하여 식별자 x 를 스코프에 등록한다.

3. 이때 x 의 값은 undefined 로 초기화 된다.

4. 이후, 소스코드는 실행 과정에 들어가며 아직 실행되지 않은 할당문 x = 'hello'; 를 실행한다.

5. 이때 엔진은 x 에 값을 할당하기 위해 x 가 이미 스코프에 등록되었는지 확인한다.

6. x 가 등록 (선언) 된 변수라면, 할당을 진행하며 그 결과를 또 스코프에 등록한다. 

7. 실행 결과, x 의 값은 'undefined' 에서 'hello' 로 바뀐다. 

 

 

📍 만약 다음과 같이 전역 코드와 함수 코드로 구성된 코드라면 어떨까? 

 

// 가. 전역변수 선언
const x = 1;

// 나. 함수 선언문
function foo(y) {
    // 다. 지역변수 선언
    const x = 2;
    // 라. 메서드 호출
    console.log(x + y); // 102
}

// 마. 함수 호출
foo(100); 

// 바. 메서드 호출 
console.log(x + 100); // 101

 

위 코드는 단계별로 평가 & 실행된다. 

 

1. 전역 코드 평가

- 선언문 실행 (가, 나) & 전역 스코프에 등록

 

2. 전역 코드 실행

- 런타임 시작, 전역 코드 순차적 실행, 전역 변수에 값 할당, 함수 호출 (마) 

- 함수 호출 시 순차적으로 실행되던 전역 코드의 실행이 일시 중단되며, 함수 내부로 진입한다. (=== 코드의 제어권이 함수 내부로 이동한다) 

 

3. 함수 코드 평가

- 매개변수, 지역 변수 실행 (다), 지역 스코프에 등록

- this 바인딩도 결정

 

4. 함수 코드 실행 

- 런타임 시작, 함수 코드 순차적 실행, 매개/지역 변수에 값 할당, console.log 메서드 호출

- console.log 메서드 호출 시 식별자인 console 을 스코프 체인을 통해 검색하며, 이를 위해 함수의 지역 스코프는 상위 스코프 (전역) 과 연결되어 있어야 한다. 검색 결과, console 은 스코프 체인에 등록되어 있지 않은 대신 전역 객체의 프로퍼티로 존재할 것이다. 

- console 객체의 프로토타입 체인을 검색하여 log 프로퍼티를 얻는다. 

- console.log 메서드의 인자로 전달된 표현식이 (x + y) 평가되며, x 와 y 의 식별자는 스코프 체인을 통해 검색한다. 

- console.log 메서드를 실행하며, 종료되면 함수 코드 실행 역시 종료된다. 

 

5. 전역 코드 실행

- 일시 중단되었던 전역 코드의 실행이 재개된다.

 

❗전역 객체는 전역 코드가 평가되기 이전에 생성되며, 이 때 built-in 전역 프로퍼티, 함수, 객체가 추가된다. 전역 객체는 Object.prototype 를 상속받는다. 

 

✨  실행 컨텍스트

실행 컨텍스트란, 위의 예시에서 등장한 스코프, 식별자 (변수, 함수명 등), 코드 실행 순서 등을 관리하는 영역이다. 소스코드를 실행하는 데 필요한 환경을 제공하며, 코드의 실행 결과를 관리하는 일종의 내부 메커니즘이다. JS 의 모든 코드는 실행 컨텍스트를 통해 실행되며, 관리된다. 

 

실행 컨텍스트에는 렉시컬 환경과 실행 컨텍스트 스택이라는 두 가지 구성 요소가 존재한다. 

 

📌  실행 컨텍스트 스택

실행 컨텍스트 스택은 흔히 생각하는 콜 스택 (Call Stack) 과 동일하다. 이 스택의 주요 역할은 바로 코드의 실행 순서를 관리하는 것이다. 자바스크립트 엔진은 소스코드를 평가하며 실행 컨텍스트를 생성한다고 언급했었는데, 이때 생성된 컨텍스트는 차례대로 스택에 추가된다. 또한 스택이라는 자료구조에 걸맞게, LIFO 구조 (선입후출) 메커니즘을 가지고 있어, 먼저 생성된 컨텍스트가 제일 마지막에 제거된다. 

 

다음과 같은 코드는 아래 이미지에 나오는 실행 컨텍스트 스택의 입출 형태와 일치한다. 

 

const x = 1;

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

foo();

 

EC (Execution Context) Stack 

 

중요한 점은, 스택의 최상위에 존재하는 실행 컨텍스트는 언제나 현재 실행 중인 코드의 실행 컨텍스트라는 점이다. 따라서 최상위의 실행 컨텍스트는 running execution context (실행 중인 싱행 컨텍스드) 로 불린다. 

 

 

📌  렉시컬 환경

렉시컬 환경 역시 자료구조이며, 식별자와 식별자에 바인딩된 값, 그리고 상위 스코프에 대한 참조를 기록한다. 렉시컬 환경은 스코프와 식별자를 관리하는 역할을 담당한다. 특별한 점은 키로 식별자를 등록하고 값에 바인딩된 값을 등록하여 객체 형태의 스코프를 생성한다. (즉, 렉시컬 환경 역시 하나의 객체라는 의미이다)

 

❗ 사실 실행 컨텍스트는 렉시컬 환경 말고 Variable Environment 라는 또 하나의 컴포넌트로 구성되어 있으나, 특별한 경우가 아닌 이상 (try/catch, eval 등) 둘의 내용은 달라지지 않는다. 따라서 이 글에서는 Variable Environment 에 대한 설명은 따로 하지 않는다. 

 

렉시컬 환경은 환경 레코드 (Environment Record) 와 외부 렉시컬 환경에 대한 참조 (Outer Lexical Environment Reference) 라는 두 개의 컴포넌트로 구성된다. 

환경 레코드 (Environment Record)
- 스코프에 포함된 식별자 등록
- 식별자에 바인딩된 값 관리 

외부 렉시컬 환경에 대한 참조 (Outer Lexical Environment Reference)
- 상위 스코프. 즉, 해당 실행 컨텍스트를 생성한 소스코드를 포함하는 상위 코드의 렉시컬 환경

 

엔진이 렉시컬 환경에서 식별자를 검색하는 과정 역시 매우 구체적이고 세분화된 메커니즘을 따른다. 이 부분에 대해서는 다음 글에서 자세히 서술하고자 한다. 

 

❗위 내용을 종합하여 실행 컨텍스트가 생성되는 순서를 정리하면 다음과 같다.

0. 전역 객체 생성

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

2. 전역 렉시컬 환경 생성

- 전역 실행 컨텍스트에 바인딩

3. 전역 환경 레코드 생성

- built-in 객체 및 전역 스코프 제공

3-1. 객체 환경 레코드 생성

- bindingobject 와 연결 (0 에서 생성된 전역 객체: 여기에 등록하면 이후 체이닝을 통해 검색 가능)

- var 키워드로 선언한 전역 변수 (window.x 로 참조 가능)

- 함수 선언문으로 정의한 전역 함수

3-2. 선언 환경 레코드 생성 

- let, const 키워드로 선언한 전역 변수 (전역 객체의 프로퍼티가 아닌 블록 내에 존재, window.x 로 참조 불가능)

4. this 바인딩

5. 렉시컬 환경에 대한 참조 결정

- 전역 코드를 포함하는 소스코드는 없으므로 전역 렉시컬 환경의 참조값은 null 이다. (스코프 체인의 종점) 

6. 전역 코드 실행

- 식별자를 검색할 때는 실행 중인 실행 컨텍스트에서 검색

- 검색할 수 없으면 렉시컬 환경 (상위 스코프)로 이동하여 검색

- 렉시컬 환경의 참조값이 null 일 때 없는 식별자를 검색하면 Reference Error (참조 에러) 발생 --> 식별자 결정에 실패

 

 

💡 참고 ) 전역 객체와 관련하여: var, let, const 의 차이 

 

var

- var 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 됨, window.x 로 참조 가능

- 선언 단계와 초기화 단계 동시에 진행 (평가 시점에 전역 객체(Binding Object)에 등록, undefined 바인딩)

- 따라서 호이스팅 가능 (코드 실행 단계에서, 변수 선언문 실행 전에 참조 가능. but, 값은 undefined 임)

- 함수 선언문이 호이스팅 가능한 이유이기도 함 (but 함수의 경우 평가 단계에서 undefined 가 아닌 함수 객체를 등록함. 이점에서 변수와는 차이가 있음)

 

let, const 

- let, const 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아닌 블록 (스코프) 내에 존재함, window.x 로 참조 불가능

- 선언 단계와 초기화 단계 분리됨. 초기화 단계 (런타임이 실행되어 코드를 만나는 단계) 를 만나기 전까지는 일시적 사각지대에 빠짐

- 평가 단계에서 변수가 전역 객체가 아닌 "환경 레코드(Declarative Environment Record)" 에 등록되나, undefined 가 아닌 <uninitialize> 가 바인딩됨 --> 초기화가 되지 않아 변수에 접근할 수 없다는 의미 (참조할 수 없다는 의미)

- 실제 값이 할당되는 코드를 만나기 전까지는 사용 불가 (호이스팅 불가)

 

 

✨  요약 

자바스크립트 소스코드는 실행 컨텍스트에 따라 다른 스코프를 가지며, 다른 타입으로 분류된다. 실행 컨텍스트란 소스코드가 실행되기 위해 필요한 환경이며, 스코프란 실행 중인 컨텍스트의 유효한 범위이다. 

 

 

 

✨  참고자료

• JavaScript - 자바스크립트 실행 컨텍스트, 스코프(Scope), 스코프 체인
• 모던 자바스크립트 Deep Dive (위키북스) 
• 자바스크립트 - 실행 컨텍스트와 스코프