JS
실행 컨텍스트
pows1011
2024. 4. 9. 17:12
실행 컨텍스트 ( Execution Context )란
Scope,Hoisting,This,Function,Closure 등의 동작원리를 담고 있는
자바 스크립트의 핵심 원리이다.
실행할 코드에 제공할 환경 정보들을 모아놓은 객체.
실행 컨텍스트는 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 객체를 구성하고, 이를 콜 스택에 쌓아 올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장
let a = 'aaa';
function foo () {
let b = 'bbb';
function bar () {
let c = 'zzz';
console.log(a + b + c);
}
bar();
}
foo();- 위 함수를 실행하면 처음 자바스크립트 코드를 실행하는 순간 전역 컨텍스트가 콜 스택에 담긴다.전역 컨텍스트는 코드 내부에서 별도의 실행명령이 없어도 브라우저에서 자동으로 실행하므로, 자바스크립트 파일이 열리는 순가 전역 컨텍스트가 활성화 된다고 이해하면 된다. 참고로 브라우저의 경우에 window 객체가 전역 실행 컨텍스트가 된다.
- 콜 스택에서 전역 컨텍스트와 관련된 코드들을 순차로 진행하다가 foo 함수를 호출하면 자바스크립트 엔진은 foo에 대한 환경 정보를 수집해서 foo 실행 컨텍스트를 생성한 후 콜 스택에 담는다.
그러면 콜 스택 가장 위에 foo 실행 컨텍스트가 놓였으므로 전역 컨텍스트와 관련된 코드의 실행을 중지하고, foo 실행 컨텍스트와 관련된 코드, 즉 foo 함수 내부의 코드들을 순차로 실행한다. - 마찬가지로 bar함수의 실행 컨텍스트가 스택의 가장위에 담기면 foo의 실행 컨텍스트를 중단하고, bar 함수의 코드를 순서대로 진행후 모두 진행되면 bar함수의 실행이 종료되고, bar 실행 컨텍스트가 콜 스택에서 제거되면 foo의 중단된 부분부터 이어서 실행하게 된다.
실행 컨텍스트 구성
- VariableEnvironment
- 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보다. 선언 시점의 LexicalEnvironment의 스냅샷으로, 변경 사항은 반영되지 않는다.
- LexicalEnvironment
- 처음에는 VariableEnvironment와 같지만 변경 사항이 실시간으로 반영된다.
- ThisBinding
- this 식별자가 바라봐야 할 대상 객체를 의미한다.
VariableEnvironment && LexiclaEnvironment
- VariableEnvironment에 담기는 내용은 LexicalEnvironment와 같지만 최초 실행 시의 스냅샷을 유지한다는 점이 다르다. 실행 컨텍스트를 생성할 때 VariableEnvironment에 정보를 먼저 담은 다음, 이를 그대로 복사해서 LexicalEnvironment 를 만들고, 이후에는 LexicalEnvironment를 주로 활용한다.
- VariableEnvironment와 LexicalEnvironment의 내부는 environmentRecord와 outerEnvironmentReference로 구성되어 있다. 초기화 과정 중에는 사실상 완전히 동일하고 이후 코드 진행에 따라 서로 달라지게 된다.
- 이 두 환경의 내부는 다시 EnvironmentRecord와 OuterEnvironmentReference로 구성
- EnvironmentRecord : 함수 안의 코드가 실행되기 전에 현재 컨텍스트와 관련된 코드의 식별자 정보 ( 매개변수의 이름, 함수 선언 , 변수명 등 )가 저장된다. 즉 코드가 실행되기 전에 자바스크립트 엔진은 이미 해당 환경에 속한 코드의 변수명 등을 모두 알고 있게 된다 ( Hoisting )
- OuterEnvironmentReference ( 외부 렉시컬 환경에 대한 참조 ) : 상위 스코프를 가리킨다 . 즉 현재 Environment Record보다 바깥에 있는 EnvironmentRecord를 참고한다는 뜻이며, 해당 실행 컨텍스트를 생성한 함수의 바깥 환경을 가리킨다. 코드 상에서 어떤 변수에 접근하려고 하면 현재 컨텍스트의 LexicalEnvironment를 탐색해서 발견되면 그 값을 반환하고, 발견하지 못할 경우 다시 OuterEnvironmentRecord에 담긴 LexicalEnvironment를 탐색하는 과정을 거친다. 전역 컨텍스트의 LexicalEnvironment까지 탐색해도 해당 변수를 찾지 못하면 Undefined를 반환
EnvironmentRecord
- EnvironmentRecord는 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장된다.
컨텍스트 전체를 처음부터 끝까지 훑으며 순서대로 식별자들을 수집하는데 여기에서 수집되는 식별자들은 매개변수 식별자,선언된 함수, var로 선언된 변수의 식별자 등이 해당 - EnvironmentRecord는 현재 실행될 컨텍스트의 대상 코드 내에 어떤 식별자들이 있는지만을 먼저 수집하기 때문에, 변수를 인식할 때 식별자만 끌어올리고 할당 과정은 원래 자리에 순서대로 남겨둔다 ( Hoisting 개념 )