javascript execution context (실행 콘텍스트)

 

사전적 의미

execution : 실행, 사형 집행, 강제 집행, 체결
context : 문맥, 맥락, 전후 사정

사전적의미로 봤을 때, 실행시 문맥, 실행시 전후 사정을 말하는 것 같다.

 

고유명사로서 의미

ECMAScript 에서 정의하는 EC(Execution Context)는 다음과 같이 표현한다.

Execution context (abbreviated form — EC) is the abstract concept used by ECMA-262 specification for typification and differentiation of an executable code.

실행 콘텍스트는 실행가능한 코드를 형상화하고 구분하는 추상적인 개념이다.

즉, EC는 자바스크립트 엔진이 코드를 실행할 때 생성되는 하나의 환경(environment)이라고 할 수 있다.

실행 컨텍스트(Execution Context)는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. 실행 컨텍스트를 바로 이해하지 못하면 코드 독해가 어려워지며 디버깅도 매우 곤란해 질 것이다.
ECMAScript 스펙에 따르면 실행 컨텍스트를 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이라고 정의한다. 좀 더 쉽게 말하자면 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경 이라고 말할 수 있겠다. 여기서 말하는 실행 가능한 코드는 아래와 같다.
- 전역 코드 : 전역 영역에 존재하는 코드
- Eval 코드 : eval 함수로 실행되는 코드
- 함수 코드 : 함수 내에 존재하는 코드
일반적으로 실행 가능한 코드는 전역 코드와 함수 내 코드이다.

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

실행할 코드에 제공할 환경 정보들을 모아놓은 객체
코드들을 실행할 때, 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이를 콜 스택에 쌓아 올렸다가
가장 위에 쌓여있는 컨텍스트와 관련있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장합니다.

출처 : 코어 자바스크립트

 

처음 자바스크립트 코드를 실행하는 순간 전역 컨텍스트가 콜 스택에 담깁니다. 
그리고 함수들이 스택에 쌓입니다.

 

내가 이해한대로 실행 컨텍스트에 대해 쓰자면, 코드들을 각 역할에 맞게 각각 하나의 단위씩 묶고(전역 공간, 함수, eval 함수),
이 단위들이 실행될 때 마다 스택형식으로 저장해놓는 객체라고 할 수 있겠다.
(각 단위안에는 VariableEnvironment, LexicalEnvironment, TisBinding 가 있다. 엔진이 활용할 뿐이다!)
즉, 사용자가 함수를 호출했을 때 외부에서 해당 함수를 실행시키기 위한 집합체

 

this

실행컨텍스트의 thisbinding에는 this로 저장된 객체가 저장됨

실행 컨텍스트 활성화 당시에 this가 지정되지 않은 경우 this에는 전역 객체가 저장됨, 그 밖에는 호출하는 방법에 따라 다름

전역공간 -> window/global

함수내부-> window/ global

메소드 호출시 -> 메소드 호출 주체 (. 앞)

callback 에서 -> 기본적으로는 "함수 내부"와 동일
-> call, apply, bind 메서드로 this에 저장된 객체가 달라질 수 있음.
 
생성자 함수에서 -> 인스턴스를 가리킴

 

실행 컨텍스트를 왜 공부해야할까?

실행컨텍스트는 엔진에서 동작하는 방식이고, 개발자가 볼 일이 없는데 왜 공부해야하냐면,
js코드가 어떻게 동작하는지 알 수 있기 때문이다.

 

 

**단어 설명

- 스코프 : 변수의 유효 범위, es5까지 전역공간, 함수에 의해서만 스코프범위
-  스코프체인: 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색해나가는 것
- 콜스택 : 현재 어떤 함수가 동작하고 있는지, 다음에 어떤 함수가 호출되어야하는지 등을 제어하는 자료구조
- 호이스팅 : 변수 '선언'과 함수 '선언'을 끌어올리는 것 (js 엔진에서만 활용, 실제로 코드가 올라가는 것은 아님)
- 자바스크립트의 모든 변수는 특정 객체(LexicalEnvironment)의 프로퍼티로서 동작함.
- 콜백함수 : 함수 A의 제어권을 다른 함수(B)에게 넘겨주는 경우 함수 A를 콜백함수
- VariableEnvironment : LexicalEnvironment 와 동일, 최초 실행시의 스냅샷을 유지하고 변경안함
- LexicalEnvironment : 컨텍스트를 구성하는 환경정보들을 사전에서 접하는 느낌으로 모아놓은 것이다.

LexicalEnvironment에는 environmentRecord, outerEnvironmentReference 두가지가 있다.
environmentRecord : 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장됨
(호이스팅이 된 결과값을 저장하는 행위 및 데이터 그 자체)

- outerEnvironmentReference : 스코프체인을 만드는 곳
현재 호출된 함수가 선언된 당시의 LexicalEnvironment를 참조한다.

'선언하다'라는 행위가 실제로 일어날 수 있는 시점이란 콜 스택상에서 어떤 실행 컨텍스트가 활성화된 상태일 때뿐입니다.