자바스크립트 실행문맥(Execution context) 이해하기

August 13th 2018

Contents

우리가 쓴 코드가 읽히는 방식
자바스크립트 실행문맥의 이해하기
- Execution stack
- Global execution context
실행문맥에 담기는 것들
실행문맥의 생성 및 코드 실행
실행문맥 vs Scope

우리가 쓴 코드가 읽히는 방식

자바스크립트의 호스팅 환경이 웹브라우저라고 할 때, 웹브라우저의 자바스크립트 엔진이 우리가 쓴 코드를 실행시켜 줍니다. 자바스크립트의 대표적인 엔진으로는 Google의 V8엔진이 있고, 그 외에 Rhino, SpiderMonkey, JavascriptCore 등이 있습니다. 우선, 아래와 같이 자바스크립트 코드가 어떻게 읽히는지 간략히 정리해 보았습니다.

executioncontext

먼저, 자바스크립트 엔진의 parser는 우리의 코드를 한줄 한줄 읽어 들이며, syntax 오류가 없는지 검토 합니다. 만약, 오류를 발견하면, 실행을 멈추고 오류 메세지를 띄웁니다.
Syntax 오류가 없다면, 우리의 코드를 컴퓨터가 이해할 수 있는 Machine Code로 변경을 해 줍니다.
이제 우리가 입력한 코드 내용이 실행이 됩니다.

자바스크립트 실행문맥 이해하기

자바스크립트 애플리케이션을 실행하면, 자바스크립트 interpreter는 현재 실행중인 특정 코드 맥락에 사용할 변수와 그 변수에 할당되는 값이 저장되는 공간을 별도로 생성합니다. 이 메모리 공간을 실행문맥 (Execution contexts)이라고 부릅니다.

Execution stack

자바스크립트에서는 어떠한 함수가 호출될 때마다 새로운 Execution context가 생겨나고, 일반적으로 함수 내 코드 실행이 완료되면 해당 Execution context도 사라지게 됩니다.

var name = 'John';

function first() {
  var a = 'Hello!';
  seconed();
  var x = a + name;
}

function second() {
  var b = 'Hi!';
  var z = b + name;
}

first();

위의 코드를 예로 아래와 같이 도식화 해 보았습니다. 새로운 함수가 호출되면 현재의 실행문맥위에 새로운 실행맥랑이 형성됩니다. 그리고 해당 함수가 끝나면 직전의 실행맥락으로 돌아갑니다.

executionstack

Global execution context

하지만, 웹애플리케이션이 실행되고 종료될 때까지 사라지지 않는 실행문맥이 있습니다. Global execution context인데, 웹애플리케이션을 실행하면, 기본적으로 Global context가 밑바탕에 흐르고 있다고 생각할 수 있습니다. Global execution context는 어떠한 함수 내부에 위치하지 않은 변수 및 함수를 포함하고 있습니다.

Execution Context에 담기는 것들

각 실행문맥은 아래와 같은 3가지 프로퍼티를 소유합니다.

Scope 내 변수 및 함수(Local, Global)
- 현재 실행문맥의 변수 및 접근 가능한 외부 함수의 변수, 전역 변수
전달 인자(arguments)
- 호출된 함수에 전달된 전달인자
호출된 근원 (caller)
- 어디에서 호출된 것인지 확인 가능
This variable
- this의 값은 함수 호출 맥락에 따라 달라짐

실행문맥의 생성 및 코드 실행

Creation phase

a. Variable Object(VO)를 생성함.
- 실행문맥을 생성한 함수로 전달된 모든 arguments를 포함하고 있는 arguments 객체를 생성함.
- 함수 선언문에 대한 코드 스캔이 이루어 지고, 해당 함수를 참조하는 프로퍼티가 VO에 생성됨.
- 변수 선언에 대한 코드 스캔이 이루어 지고, 해당 변수에 대한 프로퍼티가 VO에 생성됨. 변수의 값은 undefined로 설정됨.
- Creation phase의 세 단계 중 마지막 두 단계는 Hoisting을 의미합니다.
b. Scope Chain을 생성함.
c. 'this' 키워드의 값을 결정함.

Execution phase

실맹문맥을 새로 생성한 함수의 코드를 실행함.

실행문맥의 생성 및 코드 실행

자바스크립트의 실행문맥은 Scope와 관련이 있기 때문에, Execution context와 Scope를 혼동할 수 있습니다. 하지만, Scope와 Execution context는 다르기 때문에 용어 사용시 주의가 필요합니다.

Execution contexts는 코드가 작동할 때 생성이 되고, lexical scope는 코드가 쓰여진 위치에 의해 정해집니다.

Scope라는 단어로 실행문맥을 표현 하려면, 코드가 쓰여진 위치에 관한 일반적인 Scope에 대해 이야기 할 때에는 'lexical scope', 실행문맥을 이야기 할 때에는 in-memory scope라고 표현하는 것도 둘을 구분하는 좋은 방법인 것 같습니다.

'Lexical environment: where something sits physically in the code you write.

참고

Scope & Hoisting관련 포스팅

Handmade with .