[자바스크립트 스터디] 자바스크립트의 실행 환경(Execution Context), Lexical Environment

ECMA-262 Edition5을 기준으로 설명합니다.

변수가 선언되고 할당되고, 초기화되기 까지

var num = 7;

[자바스크립트 스터디] 자바스크립트의 데이터 타입, 참조형

 

위의 코드는 아주 기본적인 자바스크립트에서의 변수 선언, 초기화 그리고 할당 단계가 함축되어 있는 코드이다. 데이터의 타입에 따라 어떻게 메모리에 할당되는지는 다르다. 그에 관해서는 이전 글에서 설명했다. 이번 글에서는 "그렇다면 이러한 변수들은 자바스크립트 실행 시 어떻게 활용될까?"의 관점에서 써보려고 한다. 

 

Execution Context(실행 컨텍스트) and Execution Stack(실행 스택)

실행 컨텍스트와 실행 스택에 대해 먼접 짚고 넘어가야 할 것 같다. 먼저 실행 컨텍스트이다. 컨텍스트를 잘 생각해보면 무언가 "환경 - Nature가 아닌 Environment의 느낌"에 관한 단어라는 것을 짐작할 수 있을 것이다. 다음과 같은 코드가 있다고 생각해보자.

 

var num = 6;

function double(n) {
  var num = n * 2;
  samplePrint();
  return num;
}

function samplePrint() {
	console.log(num);
}

console.log(double(2));
samplePrint();

  

자바스크립트는 먼저 이 파일을 스캔한 다음, 필요한 정보를 모아서, 위의 코드의 실행에 필요한 "정보"를 수집할 것이다. 이것이 "실행 컨텍스트"이다. 그 후 파서를 통해 코드를 분해하고, 변수와 함수를 메모리에 할당하고 소스코드가 생성되고 실행될 것이다. 즉 코드를 실행하기 위한 미리 정보를 모아둔 "게임의 스타터 팩" 같은 느낌이라고 보면 될 것 같다.

 

그렇다면 이 게임 스타터 팩 - 실행 컨텍스트는 어떻게 구성되어 있을까?

스타터 팩 - 실행 컨텍스트는 크게 VariableEnvironment, LexicalEnvironment 그리고 ThisBinding으로 구성되어 있다. 각기를 예를 들어서 설명하자면 게임 초기 캐릭터 생성시의 유저 정보를 VariableEnvironment가 가지고 있는다. 즉, 실행 컨텍스트가 처음 만들어질 때의 환경 정보를 미리 사진처럼 찍어서 보관한다고 보면 된다. 그 이후에 LexicalEnvironment가 이 초기 사진 - 정보 -를 가지고 복사해서 LexicalEnvironment에 저장한 다음 이를 주로 사용하게 된다. ThisBinding은 this가 바라봐야 할 곳을 가리키게 한다.

 

그렇다면 이러한 실행 컨텍스트들을 구성한다고 하면 정작 어떻게 쓰이는 것일까? 바로 Call Stack이라는 곳에 쌓아놨다가 하나하나 실행하는 것이다. 근데 이런 Call Stack에 담기는 실행 컨텍스트에는 3가지 타입이 있다.

• Global Execution Context(GEC) : 

GEC의 경우 자바스크립트 코드가 처음 브라우저 등에 로드될 때 만들어지는 실행 컨텍스트이다. 함수안에 없거나, 전역 변수 등등이 이 GEC에 위치된다. 만약 아무 코드가 없는 경우에는 어찌 될까? Browser의 경우에는 window object를 그리고 Node의 경우에는 global object를 실행하고 this의 값을 실행 환경에 따라 window나 global로 할당한다. 위의 코드 같은 경우 다음과 같이 GEC에 초기 정보가 담긴다.

 

• Functional Execution Context(FEC)

함수가 실행 될 때 마다 만들어지는 컨텍스트이다. 전역 실행 컨텍스트(GEC)가 단 한번만 정의되는 것에 비하면 함수가 실행될 때 마다 정의되서 Call Stack(그림상 왼쪽 박스)에 담긴다. 위의 코드 상에서는 double과 samplePrint가 실행 - 호출 -되었기에 스택의 LIFO(Last In First Out)에 의해 samplePrint의 FEC가 정의되며 가장 나중에 호출되었기에 가장 먼저 실행된다.

• Eval

---

이를 통해 간략하게 나마 JavaScript의 실행 컨텍스트에 대해 알아봤다. 하지만 아직 우리가 알아야 할 부분이 몇 개 더 있다. 바로 environmentRecord와 outerEnvironmentRecord이다. 먼저 하나 알아두어야 할 것이 있다. environmentRecord는 식별자의 정보를 수집해둔다. 근데 이때는 실행 컨텍스트가 환경을 만들어 두었을 뿐 코드 자체는 실행되기 전의 상태이다.

이것이 다음 시간에 알아볼 호이스팅이다.