🔥🕺🏼 Hoisting 시각화 자료

변수 할당

지정된 초기 값 없이 var 혹은 let 문을 사용해서 선언된 변수는 undefined 값을 갖습니다.

선언되지 않은 변수에 접근을 시도하는 경우 ReferenceError 예외가 발생합니다.

---

부연 설명

#1 Creation Phase

코드의 Lexical scope가 Global scope인 명령에 한하여 위에서부터 순차적으로 훑는다.

1. 함수 생성
   function 키워드로 정의된 함수의 이름을 변수명으로 하고,
   구현부에 대한 reference를 저장한다.
   

💡 단, const foo = function x(){ … } 는 const로 정의된 변수 foo에 대한 정의이므로,function 키워드로 정의한 함수가 아니다.

2. 변수 생성
   var, let, const 각 키워드 별 변수의 생명주기에 따라 선언 또는 초기화까지 진행한다.

#2 Execution Phase

Global scope의 모든 코드를 위에서부터 순차적으로 한 줄씩 실행한다.

1. 함수의 실행 명령은 call stack에 실행 컨텍스트를 쌓아 실행한다.
2. 변수(또는 함수)의 할당 명령은 변수명에 대해 주어진 값을 할당한다.

💡 Block scope와 관계없이 모든 선언은 소속된 해당 scope에 대한 Creation Phase에서 declaration 선언을 진행한다.

(단, var 변수나 function 키워드로 정의된 함수라면
실행 이후 결과는 Block Scope 안에 속하지 않고, 최상위 Scope에 속하게 된다.)

---

코드 실행 결과 예상하기

Prerequisite

Understanding Javascript Engine Phases, Global, Lexical, Block scope From JS: 변수선언과 Scope

1. 기본적으로 모든 Phase에서 코드는 위에서부터 한 줄씩 차례대로 읽는다.
2. Call Stack이 활성화되며, 함수가 순차적으로 실행되는 시점은
   Creation Phase의 종료 후—Execution Phase이다.

예제

console.log(a); // undefined
var a;

💡 함수와 변수는 초기화 시점이 다르다.

var a;
console.log(a); // *f* a() {}
function a() {}
console.log(a); // *f* a() {}

var a = 1;
console.log(a); // 1
function a() {}
console.log(a); // 1

function a() {}
console.log(a); // *f* a() {}
var a = 1;
console.log(a); // 1

💡 동일한 이름의 함수가 있다면, 이후 내용이 이전 내용을 Override한다.

function a() { 1; }
console.log(a); // ƒ a() {}
function a() {}
console.log(a); // ƒ a() {}
var a = 1;
console.log(a); // 1

💡 Block scope는 Creation Phase를 건너뛰고, Execution Phase에만 실행된다.

{  function a() { 1; } }
console.log(a); // ƒ a() { 1; }
function a() {}
console.log(a); // ƒ a() { 1; }
var a = 1;
console.log(a); // 1

scope chaining function scope === local scope

우리가 실행하는 스크립트는 콜 스택에 올라오는 함수랑 똑같다.

즉, 함수를 실행할 때는 또 다른 스크립트를 실행하는 것으로 생각하면 된다.

Creation Phase부터 Execution까지 처음부터 다시

그 안에 없으면 양파 껍질 까듯 가장 가까운 스코프에서 찾아옴

그게 바로 scope chaining

💡 scope chaining
가장 가까운 scope에 존재하는 변수를 가져온다.

function a() {
  console.log(a); // ƒ a() { console.log(a); } 
}
a();

function a() {
  console.log(a); // undefined
  var a = 1;
}
a();

💡 scope chaining 응용

function a() {
  console.log(eval); // undefined
  {
    function eval() {}
  }
  console.log(eval); // ƒ eval() {} 
}
console.log(eval); // ƒ eval()
a();
console.log(eval); // ƒ eval()

console.log(a); // undefined
{
	function a() {}
}

💡 scope chaining: let과 var의 차이

function a() {
  console.log(b); // undefined
}
let b;
a();

function a() {
  console.log(b); // ReferenceError
}
a();
let b;

function a() {
  console.log(b); // undefined
}
a();
var b;

var와 function은 Creation Phase에 정의될 때,
최상위 스코프에 정의된다.

따라서, function의 구현부라면 function scope == local scope에 존재하게 된다.

Event Loop에 대해선 Event Loop 참고