해당 글은 책을 보고 중요하다고 생각한 부분을 그대로 옮기기도 하지만 저만의 언어로 풀어 작성한 글입니다. 틀린 내용이 있을 수 있고, 저만의 언어로 풀다보니 누락되거나 내용이 다르게 전달될 수 있습니다.
학습 회고
- 실행 컨텍스트에 대해서 제대로 익히고 이해했습니다.
- 스코프 체인이 어떻게 이루어져 있는지 이해했습니다.
실행 컨텍스트
실행할 코드에 제공할 환경 정보들을 모아놓은 객체
실행 컨텍스트가 활성화되는 시점에 VariableEnvironment, LexicalEnvironment, ThisBinding의 세가지 정보를 수집합니다.
VariableEnvironment
현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보. 선언 시점의 LexicalEnvironment의 스냅샷
LexicalEnvironment를 주로 사용된다고 하는데 왜 똑같이 생긴 VariableEnvironment가 존재하는가?
코어 자바스크립트 저자의 답변
with 구문 또는 block scope와 관련이 있습니다.
block scope는 별도의 실행 컨텍스트를 생성하지 않고 현재의 컨텍스트를 유지한채 임시의 LexicalEnvironment만을 생성하고 그 내부에서 변수들을 관리합니다. 종료 시점에 다시 복구해야 하는데 그러기 위해서 VariableEnvironment가 참조하고 있는 변수들을 찾아 복구합니다.
출처
LexicalEnvironment
처음엔 VariableEnvironment와 같습니다. 실시간으로 변경 사항이 반영됩니다.
LexicalEnvironment은 아래의 두가지 정보를 담습니다.
- environmentRecord
- 현재 컨텍스트와 관련한 코드의 식별자 정보들을 저장합니다. 값을 저장하지 않습니다.- 자바스크립트 생성 단계에서 식별자 정보를 수집하고 저장하는데 이곳에 저장합니다.
- outerEnvironmentReference
- 현재 호출된 함수가 선언될 당시의 LexicalEnvironment를 참조합니다.- 이로 인하여 스코프 체인을 가능케합니다.
ThisBinding
this로 지정된 객체가 저장됩니다.
실행 컨텍스트 활성화 당시에 this가 지정되지 않은 경우 this에는 전역 객체가 저장됩니다.
직접 문제를 만들고 같이 풀어보기
function a() {
console.log(b); // 1
var b = "bbb";
console.log(b); // 2
function b() {
console.log(b); // 3
}
}
a();
// 1, 2, 3의 결과를 작성해주세요.
// 그렇게 생각하신 이유를 자바스크립트의 동작 방식을 근거로 설명해주세요.답안: 자바스크립트가 실행되고 전역 실행 컨텍스트가 생성됩니다. 그리고 a함수가 호출됩니다. 컨텍스트가 생성되고 실행될 때 선언 단계와 실행 단계를 거칩니다. a함수의 실행 컨텍스트가 생기고 선언 단계에서 함수b가 선언됩니다. 함수 선언식은 선언 단계에서 함수 자체가 호이스팅 되며 정의까지 됩니다. 선언이 끝나고 실행 단계가 되면 1번에는 b함수가 찍힙니다. 2번에는 'bbb'가 찍히고 3번 함수가 호출되면 'bbb'가 찍힐 것입니다. 3번에서 'bbb'가 찍힐 수 있는 이유는 LexicalEnvironment의 environmentRecord를 조회하고 값이 없어 outerEnvironmentReference에서 b를 찾아 ‘bbb’가 찍힙니다.
