JavaScript코드를 실행시키면 JavaScript 엔진은 call stack이라는 통에 전역 실행 컨텍스트를 담습니다.
console.log(TVChannel); // undefined
var TVChannel = "Netflix";
console.log(TVChannel); // Netflix
첫 번째 줄에서 undefined가 출력되는 이유는 무엇일까요?
바로 코드가 실행이 되면 JavaScript 엔진이 먼저 전체 코드를 스캔하면서 변수 같은 정보를 실핸 컨텍스트 어딘가에 미리 기록해놓기 때문입니다. 이때 기록해놓는 곳이 Record입니다.
호이스팅은 Variable Hoisting과 Function Hoisting으로 나뉩니다.
<aside> 🎆 Variable Hoisting
JavaScript 엔진은 코드를 실행하면 우선 전역 실행 컨텍스트 한 칸을 생성해서 콜 스택에 넣습니다.
그 후 전체 코드를 스캔하면서 선언할 게 있는지 찾아보고 있다면 먼저 선언해둡니다.
선언하는 과정에는 생성해둔 실행 컨텍스트 안에 있는 환경 레코드에 새로운 식별자인 TVChannel을 기록합니다. 그리고 undefined로 값을 초기화 해둡니다.
이렇게 본격적인 실행에 앞서 스캔하고 준비하는 단계를 생성 단계라고 합니다. 이어서 선언문 외에 나머지 코드를 순차적으로 실행하는데 이 단계를 실행 단계라고 합니다.
이러한 원리로 첫 번째 출력에서 undefined라는 값이 나오게 됩니다. 하지만 let과 const일 때에는 달라집니다.
let 또는 const일 때에는 엔진이 TVChannel 식별자를 기록해두긴 하지만 값을 초기화하지는 않습니다. 따라서 선언문 이전에 TVChannel을 참조하려고 하면 Reference Error가 발생합니다. 이 때 참조할 수 없는 구역을 일시적 사각지대라고 합니다.
</aside>
<aside> 🎆 Function Hoisting
</aside>
Outer의 정식 명칭은 Outer Environment Referece 외부 환경 참조입니다.
이 두 동그라미를 합쳐 렉시컬 환경 또는 정적 환경이라고 불립니다.
이번에는 변수와 함수에 대해 알아보겠습니다. 전역 범위에 lamp와 함수 범위에 lamp가 존재합니다. 이 코드를 실행시키게 되면 콜 스택에는 실행 컨텍스트 하나가 먼저 생겨 lamp와 goTo2F함수를 저장합니다. 그 후 함수를 읽는 실행 컨텍스트가 그 위에 생성이 되어서 함수 범위에 있는 lamp 변수를 저장합니다. 그럼 엔진은 이 두 lamp중 어떤 걸 lamp로 선택해야 하나 고민에 빠집니다. 이런 상황에서 변수나 함수의 값을 결정하는 것을 식별자 결정이라고 합니다. 이제 여기서 어떻게 lamp를 결정하는지 Outer을 통해 알아봅시다.