execution context 와 execution context stack

오늘 다뤄볼 내용은 실행 콘텍스트(execution context)와 실행 콘텍스트 스택(execution context stack)에 관해서다.

 

1). 실행 콘텍스트

---

An execution context is a specification device that is used to track the runtime evaluation of code by an ECMAScript implementation.

(실행 콘텍스트는 ECMAScript 구현으로 코드의 런타임 평가를 추적하는 데 사용되는 사양 장치입니다. by 구글 번역)

- ECMAScript® 2019 Language Specification

---

흠.. 잘 이해가 되지 않는다.

 

몇몇 다른 블로그를 찾아본 결과 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념'이라는 문장을 찾을 수 있었다. 또한 해당 블로그에서는 또한 '실행 콘텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경'으로 설명하였다.

 

위의 설명들을 종합해본 결과 실행 콘텍스트는 ECMAScript의 구현체로써, JS가 실행되기 위해 필요한 환경'으로 정리할 수 있겠다.

 

이 실행 콘텍스트는 몇 가지 종류가 있으며, 아래에 실행 콘텍스트의 종류와 특징을 정리해봤다.

1. 전역 실행 콘텍스트 (global execution context)
   • JS 파일이 처음 브라우저에 불려 왔을 때 실행되는 기본적인 실행 콘텍스트이다.
   • JS 코드 실행에는 하나의 전역 환경만 가능하므로, 전역 실행 콘텍스트는 둘 이상 존재할 수 없다.
   • 특정 함수 안에서 실행되는 코드가 아니라면 모두 global execution context에 포함된다.
   • window 오브젝트인 전역 콘텍스트를 생성한다.
   • this를 global object로 할당한다
2. 함수 실행 콘텍스트 (functional execution context)
   • 함수가 호출될 때마다 해당 함수에 대한 실행 콘텍스트가 생성된다.
   • 각각의 함수들은 자기만의 실행 콘텍스트를 가지며 둘 이상일 수 있다.
   • 함수가 호출되어야만 생성된다.
   • 모든 전역 실행 콘텍스트에 접근할 수 있으며, 전역 실행 콘텍스트를 실행하는 도중 JS 엔진이 해당 함수 호출을 찾으면 해당 함수에 대한 새로운 함수 실행 콘텍스트를 생성한다.
   • 함수가 strict 모드에서 실행 중일 때, _this_가 _undefined_면 해당 함수 콘텍스트 안에서 this는 window object가 된다.
3. eval execution context
   • eval 함수 안에서 실행되는 코드의 실행 콘텍스트이다.

 

위와 같은 실행 콘텍스트는 코드의 실행을 위해 함수, 변수, 객체의 프로퍼티, 클로저, 함수의 선언, this, scope 등을 알고 있어야 한다.

2). 실행 콘텍스트 스택

---

The execution context stack is used to track execution contexts. Execution context stack is a stack data structure to store all the execution stacks created while executing the JS code.
(실행 콘텍스트 스택은 JS 코드를 실행하는 동안 생성된 모든 실행 스택을 저장하는 스택 데이터 구조입니다.)

- hackernoon.com

---

 

실행 콘텍스트 스택은 다른 언어들에서 보았던 스택 메모리와 비슷한 느낌이다. 

 

• 전역 실행 콘텍스트는 기본적으로 실행 콘텍스트 스택에 있으며 스택의 가장 아래에 존재한다.
• 전역 실행 콘텍스트를 실행하는 동안 JS 엔진이 함수의 호출부를 찾으면, 함수 실행 콘텍스트를 생성하고 실행 콘텍스트 스택의 최상단에 둔다. (stack의 push)
• JS 엔진은 최상위의 실행 콘텍스트를 실행하며 현재 실행 중인 실행 콘텍스트가 이 최상위 실행 콘텍스트이다.
• 함수 실행이 종료되면 해당 함수의 실행 콘텍스트를 파기하고 직전의 실행 콘텍스트로 컨트롤을 반환한다.

var one = 1;

function A() {
	console.log('A 함수 호출')
    
    function B() {
    	console.log('B 함수 호출')
    }
    B()
}

A()

위와 같은 코드가 있다고 가정했을 때, 실행 콘텍스트 스택은 아래와 같이 동작한다.

위 코드의 실행 컨텍스트 스택을 설명한 그림

3). 실행 콘텍스트의 프로퍼티들

모든 실행 콘텍스트는 코드를 실행하고, 실행 진행률을 추적하는데 필요한 프로퍼티들이 존재한다. 아래에서는 그 프로퍼티들이 무엇이고 어떤 동작을 하는지 알아보자

3-1). VO (variable object)와 AO (activation object)

---

VO는 실행 콘텍스트의 프로퍼티로 실행 콘텍스트에 정의된 변수 및 함수 선언을 저장하는 특수한 객체이다. (함수 표현식은 포함되지 않는다.) VO는 실제 존재하는 게 아닌 추상적인 콘셉트로서, 각각의 콘텍스트 종류마다 다르게 물리적으로 표현된다. 예를 들어 전역 실행 콘텍스트에서 VO는 전역 객체 그 자체이다. 이 때문에 전역 객체의 프로퍼티 이름으로 전역 변수를 가져올 수 있는 것이다.

 

eval 같은 경우에는 전역 실행 컨텍스트 혹은 eval을 호출한 함수 실행 콘텍스트의 VO를 사용한다.

 

AO는 함수가 호출될 때 생성되며 호출될 함수의 매개 변수 및 지역 변수, 함수들을 포함하고 있다. 함수 실행 콘텍스트 내에서는 AO가 VO로 사용된다. 즉, 함수 실행 콘텍스트의 VO도 이전 설명의 VO와 비슷하다. 또한 변수 및 함수의 선언 외에도 매개변수들을 포함하고 있다는 점이 VO와 AO의 차이점이다.

3-2). SC (scope chain)

---

SC는 콘텍스트 코드에서 식별자(어떤 객체의 프로퍼티가 아닌 식별자 즉, 변수와 함수 선언부를 뜻함)를 검색하는 객체 리스트이다.

혹시 모르는 분들을 위해.

식별자 (Identifier): JS에서 식별자는 변수, 함수, 키워드 등의 이름을 뜻함

현재 범위(scope)에서 찾을 수 없는 변수 혹은 매개변수 등을 자유 변수 (free variable)이라 부르며 이러한 상황에서 상위 실행 콘텍스트의 AO 혹은 전역 실행 콘텍스트의 VO에서 해당 변수를 검색하는 것이 바로 SC다.

 

원하는 식별자를 찾을 때까지 검색을 시작한 실행 콘텍스트의 AO에서 상위 실행 콘텍스트의 AO로 검색을 반복한다.

3-3). this value 

---

this는 실행 콘텍스트와 관련된 특수한 객체이다.

 

this는 콘텍스트의 모든 값에 접근할 수 있다. 하지만 this로 변수를 찾으면 해당 실행 콘텍스트에서 직접 가져온다. 즉, SC가 일어나지 않는다. this의 값은 실행 콘텍스트에 들어갈 때 한 번만 결정된다. 

 

전역 실행 콘텍스트에서는 this 자체가 전역 객체다. (this === global VO)

이 글을 작성할 때 읽은 감사한 자료들.

---

https://velog.io/@imacoolgirlyo/JS-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-Hoisting-The-Execution-Context-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85-%EC%8B%A4%ED%96%89-%EC%BB%A8%ED%85%8D%EC%8A%A4%ED%8A%B8-6bjsmmlmgy

[JS] 자바스크립트의 The Execution Context (실행 컨텍스트) 와 Hoisting (호이스팅)

https://hackernoon.com/execution-context-in-javascript-319dd72e8e2c

Execution context, Scope chain and JavaScript internals

https://poiemaweb.com/js-execution-context

Execution Context | PoiemaWeb

http://dmitrysoshnikov.com/ecmascript/javascript-the-core/#execution-context

JavaScript. The Core.

https://www.ecma-international.org/ecma-262/#sec-execution-contexts

불러오는 중입니다...