실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다. - 코어 자바스크립트
실행 컨텍스트는 자바스크립트 코드가 실행되는 환경이다. 모든 JavaScript 코드는 실행 컨텍스트 내부에서 실행된다고 생각하면 된다.
즉, 함수가 실행되면 함수 실행에 해당하는 실행 컨텍스트가 생성되고, 자바스크립트 엔진에 있는 콜 스택에 차곡차곡 쌓인다.
그리고 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드를 실행하면서(LIFO), 전체 코드의 환경과 순서를 보장하게 된다.
실행 컨텍스트는 식별자(변수, 함수, 클래스 등의 이름)를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 매커니즘으로, 실행 컨텍스트는 곧 자바스크립트의 핵심 원리다.
언제 생성될까?
자바스크립트 엔진이 스크립트를 처음 마주할 때 전역 컨텍스트를 생성하고, 콜 스택에 push 한다.
엔진이 스크립트를 쭉 읽어내려가면서 함수 호출을 발견할 때마다, 함수의 실행 컨텍스트를 스택에 push 한다.
일단 실행 컨텍스트를 구성하는 방법은 전역공간, 함수, eval()함수 등이 있다. 이 중에서 eval 함수는 문자열로 된 자바스크립트 코드를 전달하면 그게 그대로 실행되는 함수인데, 속도나 보안이 좋지 않아 현재는 거의 쓰지 않기 때문에, 사실상 실행 컨텍스트를 구성하는 방법은 함수를 실행하는 방법 뿐이다.
중요한 점은 함수 실행 컨텍스트는 함수가 실행될 때만들어진다는 점이다. 함수를 선언할 때가 아니라 실행할 때다.
따라서 자동으로 생성되는 전역공간과 eval을 제외하면, 실행 컨텍스트가 생성되는 시점은 곧 함수를 실행하는 시점이다.
실행 컨텍스트의 종류
위에서 작성한 것처럼, 만드는 방법으로는 전역공간, 함수, eval()함수가 있다고 했다. 따라서 실행 컨텍스트의 종류도 3가지 있다.
-
전역 실행 컨텍스트: 전역 영역에 존재하는 코드.
모든 스크립트 코드는 전역 실행 컨텍스트 안에서 실행된다.
프로그램에 단 한 개만 존재하며 실행 컨텍스트의 기본이다. 함수 밖에 있는 코드는 전역 실행 컨텍스트에 있다.
브라우저의 경우에는 window객체, Node.js의 경우엔 global객체가 곧 전역 실행 컨텍스트가 된다. -
함수 실행 컨텍스트: 함수 내에 존재하는 코드.
함수가 실행될 때마다 만들어지는 실행 컨텍스트이다.
각 함수는 고유의 실행 컨텍스트를 가지며, 함수가 실행되거나 call 될 때에만 생성된다. -
eval() 실행 컨텍스트: eval 함수로 실행되는 코드.
이제 쓰지 않는 eval() 함수에 의해 생성되는 실행 컨텍스트이다.
실행 컨텍스트의 구조
실행 컨텍스트는 다음과 같은 것들을 이용하면 call stack에 쌓이게 된다.
- 전역공간은 자동으로 컨텍스트로 구성된다.
- 함수를 실행한다.
- eval()함수를 실행한다.
- block을 만든다 (ES6+)
그리고 이러한 실행 컨텍스트를 구성할 때 생기는 것들이 LexicalEnvironment 컴포넌트와 variableEnvironment 컴포넌트가 있다.
- variable Environment
VariableEnvironment에 담기는 내용은 LexicalEnvironment와 같지만, 최초 실행 시의 스냅샷을 유지한다. 실행 컨텍스트를 생서할 때 VariableEnvironment에 정보를 먼저 담은 다음, 이를 복사해서 LexicalEnvironment를 만든다.
주로 활용하는 것은 LexicalEnvironment이다. 즉, VariableEnviroment는 스냅샷 유지를 목적으로 사용한다.
- 현재 컨텍스트 내의 식별자(변수)들에 대한 정보
- 외부 환경 정보
- 선언 시점의 LexicalEnvironment의 스냅샷(변경사항 반영 X)
- Lexical Environment
LexicalEnvironment의 내부에는 environment Record와 outer Environment Reference로 구성돼 있다.
렉시컬 환경은 식별자와 식별자에 바인딩된 값, 그리고 상위 스코프에 대한 참조를 기록하는 자료구조로 실행 컨텍스트를 구성하는 컴포넌트이다.
실행 컨텍스트 스택이 코드의 실행 순서를 관리한다면 렉시컬 환경은 스코프와 식별자를 관리한다. 렉시컬 환경은 키와 값을 갖는 객체 형태의 스코프를 생성해서, 식별자를 키로 등록하고 식별자에 바인딩된 값을 관리한다.
-
environmentRecord -> 이것으로 인하여 호이스팅이 발생한다
함수 안의 코드가 실행되기 전에 현재 컨텍스트와 관련된 코드의 식별자 정보가 저장된다. 즉, 코드가 실행되기 전에 자바스크립트 엔진은 이미 해당 환경에 속한 코드의 변수명 등을 모두 알고 있게 된다. (호이스팅) -
outer Environment Reference -> 이것으로 인해 스코프와 스코프체인이 형성된다.
상위 스코프를 가리킨다. 즉 현재 environment record보다 바깥에 있는 environment record를 참고한다는 뜻이며 해당 실행 컨텍스트를 생성한 함수의 바깥 환경을 가리킨다.
따라서 자바스크립트 엔진이 현재 렉시컬 환경에서 변수를 찾을 수 없다면 외부 환경에서 찾는다는 것을 뜻한다.
만약 상위 스코프에서도 해당 식별자를 찾을 수 없다면 참조 에러(uncaught reference error)를 발생시킨다. -
처음에는 VariableEnvironment와 같음
-
변경 사항이 실시간으로 반영됨
