[Javascript] 실행 컨텍스트(execution context)

🙋‍♀️ 들어가기 전에

여러 자바스크립트 개념들과 연관되어 있기 때문에 자바스크립트 개발자는 실행 컨텍스트가 어떻게 생성되고 사용되는지 꼭 알아야한다고 생각한다.

따라서, 이번 포스팅을 통해 실행 컨텍스트의 개념을 확실히 익히는게 목적이다!

 

🤷‍♀️ 실행 컨텍스트란?

실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체다.

 

Javascript에는 3 종류의 실행 컨텍스트가 있다.

• 전역 실행 컨텍스트(Global execution context)  : 자바스크립트 파일이 열리는 순간 처음으로 실행되는 컨텍스트

• 함수 실행 컨텍스트(Function execution context) : 함수가 실행될 때 실행되는 컨텍스트

• eval 실행 컨텍스트 (Eval execution context) : eval() 함수가 실행될 때 실행되는 컨텍스트

컨텍스트가 실행되면 콜스택에 쌓이게 된다.

이해를 위해서 코드로 설명하겠다.

 

💆‍♀️ 실행 컨텍스트 관리 방법

function first() {
  console.log("Start first function");
  second();
}

function second() {
  console.log("Start second function");
}

first();

위와 같은 코드가 실행되면 아래 그림과 같이 콜스택에 쌓인다.

코드가 실행되면 전역 실행 컨텍스트가 콜 스택에 쌓이게 되고, 그 다음 first 함수의 실행으로 first 함수 실행 컨텍스트가 쌓이게 된다.

first 함수를 실행하므로 console log가 찍히고, 그 다음 second 함수를 실행하므로 second 함수 실행 컨텍스트가 쌓인다. 

콜스택 최상위에 second 함수 컨텍스트가 존재하므로 second 함수를 실행하여 console log가 찍히고 콜스택에서 제거된다. 

이어서, first 함수 컨텍스트도 제거되고 모든 코드가 실행되었으므로 전역 실행 컨텍스트도 제거된다.

 

이 처럼 javascript 엔진은 위와 같은 방법으로 실행 컨텍스트를 관리한다.

이제 javascript 엔진이 실행 컨텍스트를 생성하는 방법을 알아보겠다.

💁‍♀️ 실행 컨텍스트 생성 방법

필자가 처음에 '실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체다.' 라고 했다.

그럼 어떤 정보가 있을까?

 

실행 컨텍스트가 생성되면 3가지 구성요소가 생성된다.

• VariableEnvironment

• LexicalEnvironment

• ThisBinding

Variable Environment

컨텍스트를 생성할 때 VariableEnvironment에 정보를 먼저 담은 다음, 이를 그래도 복사해서 LexicalEnvironment를 만든다. VariableEnvironment에 담기는 내용은 LexicalEnvironment와 같지만 최소 실행 시의 스냅샷을 유지한다는 점이 다르다.

※ 스냅샷이란 특정 시간에 데이터 저장 장치의 상태를별도의 파일이나 이미지로 저장하는 기술로, 문제가 생겼을 때 복원을 해준다.

LexicalEnvironment

LexicalEnvironment의 구성요소는 environmentRecord와 outerEnvironmentReference가 있다.

 

environmentRecord에는 현재 컨텍스트와 관련된 코드의 식별자 정보들(변수, 함수, arguments)이 저장된다.

식별자 정보들이 저장될 때, 컨텍스트 내부 전체를 순서대로 수집하는 과정인 호이스팅(Hoisting)을 처리한 후 저장된다.

 

outerEnvironmentReference는 식별자의 유호범위를 안에서부터 바깥으로 차례로 검색해나가는 스코프 체인을 실행한다. 간단히 말하면 현재 컨텍스트에서 식발자를 찾지 못하면 상위 컨텍스트에서 찾는다는 말이다.

 

ThisBinding

ThisBinding는 this로 지정된 객체가 저장된다.

전역 실행 컨텍스트에서 this 값은 전역 개체를 나타낸다.

※ 브라우저 환경에서 전역 객체는 window고, NodeJS 환경에서는 global이다.

함수 실행 컨텍스트에서의 객체 참조에 의해 호출되면의 값이 해당 객체로 설정되고, 그렇지 않으면의 값이 전역 객체로 설정된다.

 

this binding이 ES6에서는 LexicalEnvironment에 포함된다. ES6에서 LexicalEnvironment 구성 요소와 VariableEnvironment 구성 요소의 한 가지 차이점은 LexicalEnvironment는 함수 선언과 변수(let 및 const) 바인딩을 저장하는데 사용되고, VariableEnvironment는 변수(var)바인딩 만 저장하는데 사용된다는 것이다.

 

참고 자료

• Understanding Execution Context and Execution Stack in Javascript
• All you need to learn to understand JavaScript
• 정재남, 『코어 자바스크립트』, 위키북스

 

---

🎉  피드백은 언제나 환영입니다. 🎉

---