실행컨텍스트
실행컨텍스트란?
실행컨텍스트란 자바스크립트의 실행하는 환경정보들을 모아놓은 객체이다.
이 실행컨텍스트에 대해서 알게된다면 호이스팅에 대해서도 바로 이해할 수 있다.
콜스택은 Stack구조로 되어있는 FILO 이다.
코드가 실행된다면 실행 할 코드를 콜스택에 넣는다.
const context = () => {
inner(); // inner함수 실행 2
console.log('inner'); // inner출력 8
const inner = () => {
inner2(); // inner2함수 실행 3
console.log('inner1'); // inner1 출력 7
}
const inner2 = () => {
inner3(); // inner3함수 실행 4
console.log('inner2'); // inner2 출력 6
}
const inner3 = () => {
console.log('inner3'); // inner3출력 5
}
}
context(); // 1이런식으로 되어있다고 하면 자바스크립트는 기본적으로는 동기적 언어다.
context가 실행되었다고 가정했을때
콜스택의 순서는 inner -> inner2 -> inner3순서로 inner3가 가장 마지막에 불렸기 때문에 inner3의 함수가 종료되면 그 전에 쌓여있던 Inner2, inner1 순서대로 출력된다.
실행컨텍스트의 구성
- VariableEnviroonment: 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보 + 선언 시점의 LexicalEnviornment의 스냅샷으로 변경사항 반영 x
- LexicalEnviroonment: 맨 처음에는 VariableEnviroonment와 같지만 실시간으로 변경사항이 반영됨
- ThisBinding: this식별자가 바라봐야 할 대상
VariableEnvironment
VariableEnvironmen에 담기는 내용은 LexicalEnvironment와 같지만 최초 실행 시의 스냅샷을 유지한다는 점이 다르다.
실행 컨텍스트를 생성할 때 VariableEnvironment 에 정보를 먼저 담은 다음, 이를 그대로 복사해서 LexicalEnvironment를 만들고, 이후에는
LexicalEnvironment를 주로 활용하게 된다.
VariableEnvironment와 LexicalEnvironment의 내부는 environmentRecord, outer로 구성되어 있다.
초기화 과정 중에는 사실상 완전히 동일하고 이후 코드 진행에 따라 서로 달라지게 될 것이므로 자세한 내용은
LexicalEnvironment 를 통해 함께 살펴 보겠다.
LexicalEnvironment
Environment Record와 outer라는 또 다른 Lexical Environment를 참조하는 포인터로 구성된다.
outer: 외부 Lexical Environment를 참조하는 포인터 중첩된 자바스크립트 코드에서 스코프 탐색을 하기 위해 사용한다.
Environment Record: environmentRecord에는 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장된다.
environmentRecord와 호이스팅
먼저 텍스트를 구성하는 함수에 지정된 매개변수 식별자, 선언한 함수가 있을 경우 그 함수 자체, var로 선언된 변수의
식별자 등이 식별자에 해당한다. 컨텍스트 내부 전체를 처음부터 끝까지 쭉 흝어나가며 순서대로 수집한다.
변수 정보를 수집하는 과정을 모두 마쳤더라도 아직 실행 컨텍스트가 관여할 코드들은 실행되기 전의 상태이다.
코드가 실행되기 전임에도 불구하고 자바스크립트 엔진은 이미 해당 환경에 속한 코드의 변수명들을 모두 알고 있게 되는 셈이다.
그렇다면 엔진의 실제 동작 방식 대신에 '자바스크립트 엔진은 식별자들을 최상단으로 끌어올려놓은 다음 실제 코드를 실행한다' 라고 생각하더라도 코드를 해석하는데는 문제될 것이 전혀 없을 것이다. 여기서 호이스팅(hoisting) 라는 개념이 등장한다.
호이스팅이란 끌어올리다 라는 의미이다. 자바스크립트 엔진이 실제로 끌어올리지는 않으나 식별자를 최우선으로 수집하기때문에
편의상 끌어올린다는 것으로 간주하자.