[JavaScript] 실행 컨텍스트 (Execution Context)

목차

1. 실행 컨텍스트란?
2. 실행할 코드와 콜스택
    2.1 실행할 코드
    2.2 콜스택
3. 컨텍스트에 담기는 정보
    3.1 Variable Environment
    3.2 Lexical Environment
    3.3 This Binding
4. 생성 과정
    4.1 스코프 체인의 생성과 초기화
    4.2 변수 객체화 실행
    4.3 this value 결정
5. 참고 링크

---

1. 실행 컨텍스트란?

실행 컨텍스트란, 자바스크립트 코드가 실행되고 있는 컨텍스트(환경)를 말한다. 즉, 실행 컨텍스트는 실행할 코드에 제공할 환경 정보(변수 정보)들을 담아놓은 환경이다. 함수를 실행할 때마다 그 함수에 대한 새로운 실행 컨텍스트를 생성하여 자신만의 고유한 컨텍스트에서 실행된다. 다시 말해, 하나의 함수는 본인의 고유한 실행 컨텍스트를 가지게 된다는 것이다.

그렇다면 실행 컨텍스트 안에 들어가 있는 정보는 어떤 것일까?

자바스크립트 엔진이 코드를 실행하기 위해서는 여러 가지 정보를 알고 있어야 한다. 예를 들어 어떤 변수를 호이스팅할지, 스코프는 어떤지, 스코프 체인은 어떻게 되는지, this는 어디에 어떻게 바인딩되는지 등이 있다.

• 변수 : 전역변수, 지역변수, 매개변수, 객체의 프로퍼티
• 함수 선언
• 변수의 유효 범위(Scope)
• this

2. 실행할 코드와 콜스택

그렇다면 실행 컨텍스트는 언제 생성될까? 바로 브라우저에서 자바스크립트 파일이 열리는 그 시점에 생성된다. 하나의 자바스크립트 파일을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 그것을 콜스택에 쌓아 올렸다가 가장 위의 컨텍스트와 관련 있는 코드를 실행하는 식으로 전체 코드의 환경과 순서를 보장한다.

2.1 실행할 코드

2.1.1 전역 코드

자바스크립트 파일이 실행되면 가장 먼저 활성화되는 것이 전역 코드의 컨텍스트이다. 전역 영역에 존재하는 코드는 전역 컨텍스트로 생성된다. 또한 자바스크립트 파일에서 함수는 여러 개일 수 있지만, 전역이라는 공간은 딱 하나뿐이다. 그렇기에 콜스택에 전역 컨텍스트는 오로지 하나뿐이다.

2.1.2 함수 코드

함수 내에 존재하는 코드를 실행하기 위한 함수 컨텍스트도 존재한다.

2.1.3 eval 코드

eval 함수로 실행되는 코드를 위한 eval 실행 컨텍스트도 존재한다. eval은 자바스크립트 내장 함수로서 어떤 특정 코드를 실행하게 할 수 있는 함수인데, 요즘은 거의 쓰지 않는다. 

2.2 콜스택

콜스택이란 현재 실행 중인 작업 관한 정보를 저장하는 Stack 자료구조를 말하는데, 후입 선출(LIFO, Last In First Out)의 방식이다. 그럼 어떤 식으로 동작하는지 한번 살펴보자.

function thirdFunc() {
  console.log("thirdFunc 함수가 호출되었습니다!");
}

function secondFunc() {
  thirdFunc();
  console.log("secondFunc 함수가 호출되었습니다!");
}

function firstFunc() {
  secondFunc();
  console.log("firstFunc 함수가 호출되었습니다!");
}

firstFunc();

// thirdFunc 함수가 호출되었습니다!
// secondFunc 함수가 호출되었습니다!
// firstFunc 함수가 호출되었습니다!

콜 스택 구조

1. 애플리케이션이 켜지면 전역 컨텍스트가 생성된다.
2. firstFunc 함수가 호출되어 firstFunc 함수 컨텍스트가 전역 컨텍스트 위로 쌓인다.
3. secondFunc 함수가 호출되어 firstFunc 함수 컨텍스트 위로 secondFunc 함수 컨텍스트가 쌓인다.
4. thirdFunc 함수가 호출되어 secondFunc 함수 컨텍스트 위로 thirdFunc 함수 컨텍스트가 쌓인다.
5. 함수 실행이 끝나면 해당 함수의 실행 컨텍스트를 파기하고 직전의 실행 컨텍스트에 컨트롤을 반환한다.
6. 애플리케이션이 종료(탭이 꺼지거나, 브라우저가 종료되는 경우)될 때까지 실행 컨텍스트는 유지된다.

3. 컨텍스트에  담기는 정보

3.1 Variable Environment

VariableEnvironment는 최초 실행 시의 식별자 정보 및 외부환경의 정보를 스냅샷으로 유지하고, 변경사항은 반영되지 않는다. 실행 컨텍스트가 생성될 때 VariableEnvironment에 정보들을 먼저 담은 다음에 이거를 그대로 복사해서 LexicalEnvironment를 만들고, 그거를 사용한다.

그렇기 때문에 LexicalEnvironment와 대게 동일한 값을 갖지만 만들어진 변수 선언 및 함수 선언에 대해 바인딩을 유지한다. 다시 말해, LexicalEnvironment는 코드 실행 중에 실행 컨텍스트 내에서 변경될 수 있지만 VariableEnvironment는 항상 값을 유지한다.

• LexicalEnvironment는 일시적으로 LexicalEnvironment 하위에 새로운 환경을 가리킵니다.
• 이 새로운 환경은 임시 바인딩을 보유합니다.
• 그리고 임시 범위를 벗어나면 VariableEnvironment가 참조하고 있는 값으로 LexicalEnvironment를 복구합니다.

💡 바인딩이란?
'프로그램의 어떤 기본 단위가 가질 수 있는 구성요소의 구체적인 값, 성격을 확정하는 것'을 말한다.

3.2 Lexical Environment

변수, 매개변수, 인자, 함수 선언 등의 정보가 담겨있다. 정보들은 Environment record와 Outer로 구성되어 있다.

3.2.1 Environment record

Environment record에서는 변수와 함수 선언들을 저장하는데, 코드가 실행되기 전에 모든 정보를 수집한다. 그래서 자바스크립트 엔진은 코드가 실행되기 전에 코드의 변수명을 모두 알 수 있는 것이다(호이스팅). 코드가 실행되기 전에 1차적으로 변수명을 수집하는 것이기 때문에 수집하고자 하는 변수가 당장에 어떤 값을 할당받고 있는지에 대해서는 관심이 없다.

3.2.2 Outer

다른 Lexical Environment를 참조하기 위해서 존재한다. 예를 들어 해당 함수 안에 있는 변수 말고도 외부에 있는 변수를 참고하고자 하는 경우에 외부 Lexical Environment에 접근할 수 있어야 하는데, 이 Outer가 정보를 가지고 있다.

다시 말해, 스코프 체인(=외부 환경에 대한 참조)에 대한 정보가 들어있다. 전역 환경에서는 null이다.

3.3 This Binding 

this 프로퍼티에는 this 값이 할당된다. this에 할당되는 값은 함수 호출 패턴에 의해 결정된다.

4. 생성 과정

4.1 스코프 체인의 생성과 초기화

스코프 체인의 생성과 초기화

실행 컨텍스트가 생성되면 가장 먼저 스코프 체인이 생성되고 초기화된다. 이때 스코프 체인은 전역 객체의 레퍼런스를 포함하는 리스트가 된다.

4.2 변수 객체화 실행

Variable Instantiation(변수 객체화): VO와 GO의 연결

스코프 체인의 생성과 초기화가 다 끝나면 변수 객체화(Variable Instantiation)가 실행된다.

변수 객체화는 변수 객체에 프로퍼티와 값을 추가하는 것을 의미한다. 변수, 매개변수와 인수 정보, 함수 선언을 Varibale Object에 추가하여 객체화하는 과정이다.

4.3 this value 결정

this value 결정

변수 선언 처리가 끝나면 다음은 this value를 결정한다. this value가 결정되기 이전의 this는 전역 객체를 가리키고 있다가 함수 호출 패턴에 의해 this에 할당되는 값이 결정된다. 전역 코드의 경우, this는 전역 객체를 가리킨다.

5. 참고 링크

🔗 poiemaweb 실행 컨텍스트와 자바스크립트의 동작 원리

🔗 The JavaScript Execution Context, Call-stack & Event Loop

🔗 실행 컨텍스트(렉시컬 환경과 this)

🔗 [Javascript] Execution Context와 Lexical Environment

🔗 JS 실행 컨텍스트와 콜 스택

🔗 바인딩(Binding)