실행 컨텍스트란
실행 컨텍스트(Execution Context)란 scope , hoisting , this , function , closure 등의 동작원리를 담고 있는 자바스크립트의 핵심 원리입니다. 실행 컨텍스트를 바로 이해하지 못한다면 코드 독해가 어려워지고 디버깅도 매우 곤란해질 것입니다.
실행 컨텍스트를 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이라고 정의하며, 좀 더 쉽게 말하자면 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경정보들을 모아놓은 객체들이라고 말할 수 있습니다. 여기서 말하는 실행 가능한 코드는 아래와 같습니다.
자바스크립트에서 실행 컨텍스트를 만들 수 있는 방법은 아래와 같습니다.
- 전역 코드 : 전역 영역에 존재하는 코드
- Eval 코드 : eval 함수로 실행되는 코드
- 함수 코드 : 함수 내에 존재하는 코드
- (ES6부터는) 블록문
실행 컨텍스트가 활성화되는 시점에 다음과 같은 현상이 발생합니다.
- 호이스팅이 발생 (선언된 변수를 위로 끌어올림)
- 외부 환경 정보를 구성
- this 값을 설정
-
Global Execution context
자바스크립트 엔진이 처음 코드를 실행할 때 Global Execution context가 생성됩니다.
생성 과정에서 전역 객체인 Window Object(Node는 Golobal)를 생성하고 this가 Window 객체를 가리키도록 합니다. -
Function Execution context
자바스크립트 엔진은 함수가 호출될 때마다 호출된 함수를 위한 Execution context를 생성합니다. 모든 함수는 호출되는 시점에 자신만의 Execution Context를 가집니다.
Call Stack
코드가 실행되면서 생성되는 Execution Context를 저장하는 자료구조
- 엔진이 처음 Script를 실행할 때, Global Execution Context를 생성하고 이를 Call Stack에 push 합니다.
- 그 후 엔진이 함수를 호출할 때마다 함수를 위한 Execution Context를 생성하고 이를 Call Stack에 push 합니다.
자바스크립트 엔진은 Call Stack의 Top에 위치한 함수를 실행하며 함수가 종료되면 Stack에서 제거(pop) 하고 제어를 다음 순서에 위치한 함수로 이동합니다.
실행 컨텍스트의 구성
실행 컨텍스트 객체에는 아래 정보들이 담깁니다.
- VariableEnvironment
현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보, 선언 시점의 LexicalEnvironment의 스냅샷으로 변경사항은 반영되지 않습니다.- LexicalEnvironment
처음은 VariableEnvironment와 같으며 변경사항이 실시간으로 반영됩니다.- ThisBinding
this 식별자가 바라보고 있는 대상 객체
VariableEnvironment(V.E)와 LexicalEnvironment(L.E)는 실행 컨텍스트에서 변수의 참조들을 기억하는 환경입니다. 차이점이라면 V.E에서는 컨텍스트를 최초 실행한 시점의 스냅샷을 유지하는 반면, L.E에는 변경사항이 반영된다는 것입니다. 일반적으로는 함수의 L.E는 해당 함수가 가지는 자신의 로컬 스코프 범위를 말합니다.
이 두 환경의 내부는 다시 EnvironmentRecord 와 OuterEnvironmentReference로 구성되어 있습니다.
- EnvironmentRecord : 컨텍스트와 관련된 코드의 식별자 정보들이 저장됨 / 호스팅 개념
- OuterEnvironmentReference : 호출된 함수가 선언될 당시의 Lexical Environment를 참조하는 포인터로, 스코프 체인을 가능하게 합니다.
식별자는 var a = 3에서 a를 말합니다
실행 예제
var x = 'xxx';
function foo () {
var y = 'yyy';
function bar () {
var z = 'zzz';
console.log(x + y + z);
}
bar();
}
foo();위 코드를 실행하게 되면 아래와 같이 실행 컨텍스트 스택(Stack)이 생성되고 소멸합니다.
현재 실행 중인 컨텍스트에서 이 컨텍스트와 관련 없는 코드(예를 들어 다른 함수)가 실행되면 새로운 컨텍스트가 생성됩니다. 이 컨텍스트는 스택에 쌓이게 되고 컨트롤(제어권)이 이동합니다.
정리
JavaScript에서의 실행 컨텍스트란,
코드를 실행하기 위해 필요한 정보들은 가진 범위를 객체 형태로 나타낸 것입니다.
출처 : 개발자 황준일
출처 : poiemaweb
출처 : ggong.velog
