Chapter 5: The (Not So) Secret Lifecycle of Variables - hochan222/Everything-in-JavaScript GitHub Wiki

When Can I Use a Variable?

greeting();
// Hello!

function greeting() { 
  console.log("Hello!");
}

선언은 밑에했는데 greeting()은 왜 실행될까...?
1장에서 우리는 모든 식별자가 컴파일 시간동안 해당 범위에 등록된다는 점을 배웠다. 또한, 모든 식별자는 해당 범위가 입력 될 때마다 해당 범위의 시작 부분에 생성된다. 이를 호이스팅(hoisting)이라고 한다.

하지만 호이스팅만으로는 질문에 대한 답을 찾을 수 없다. 스코프의 시작 부분에서 greeting이라는 식별자를 볼 수 있지만, 선언되기 전에 greeting() 함수를 호출 할 수있는 이유는 무엇인가?
이 말은 다음과 동일하다.
스코프가 실행되기 시작하는 순간부터 greeting 변수에 값(function reference)이 할당되는 방법은 무엇인가?

답은 함수 호이스팅이라고 하는 공식 함수 선언의 특수한 특성때문이다. 함수 선언의 이름 식별자가 범위의 맨 위에 등록되면 해당 함수의 참조에 대해 추가로 자동 ​​초기화된다.

Hoisting: Declaration vs. Expression

greeting();
// TypeError

var greeting = function greeting() { 
  console.log("Hello!");
};

호이스트되는 것 외에도 var로 선언 된 변수는 범위의 시작 부분에서 자동으로 undefined로 초기화된다. 따라서, greeting은 밑에서 함수로 선언되기전까지는 함수 참조로 연결이 안된다.

Variable Hoisting

greeting = "Hello!"; 
console.log(greeting); 
// Hello!

var greeting = "Howdy!";

1. 식별자가 올라온다.
2. undefined로 초기화된다.
3. 코드를 진행한다.

Hoisting: Yet Another Metaphor

JS엔진의 실행방식을 다음과 같이 추측 할 수 있다.

var greeting;           // hoisted declaration
greeting = "Hello!";    // the original line 1
console.log(greeting);  // Hello!
greeting = "Howdy!";    // `var` is gone!

한가지 예시를 더 보자.

studentName = "Suzy";
greeting();
// Hello Suzy!

function greeting() {
  console.log(`Hello ${ studentName }!`);
}
var studentName;

와 같은 코드는 아래와 같이 JS엔진에 의해 변환 될 것이다.

function greeting() {
  console.log(`Hello ${ studentName }!`);
}
var studentName;

studentName = "Suzy";
greeting();
// Hello Suzy!

호이스팅은 범위가 입력 될 때마다 변수의 자동 등록을 위해 컴파일 작업중에 런타임 명령을 생성하는 작업으로 생각하자.

Re-declaration?

var studentName = "Frank"; 
console.log(studentName); 
// Frank

var studentName; 
console.log(studentName); 
// ???

변수가 두번 선언되면 어떻게 동작할까...? 호이스팅 관점에서 위 코드는 다음과 같이 진행된다.

var studentName;
var studentName; // clearly a pointless no-op!

studentName = "Frank"; 
console.log(studentName); 
// Frank

console.log(studentName);
// Frank

따라서 두번째 var studentName;는 무의미하다.
(2장을 빌리면, 스코프 관리자에게 studentName 선언이 되었는지 묻기 때문에 아무 작업도 하지 않는다)

let studentName = "Frank"; 

console.log(studentName); 

let studentName = "Suzy";

let은 재선언을 허용하지 않는다. SyntaxError.
ES6가 let을 도입했을 때 “재 선언”을 방지하기로 결정했다.

Constants?

const 키워드를 사용하려면 변수를 초기화해야하므로 선언에서 할당을 생략하면 SyntaxError가 발생한다.

const empty; // SyntaxError

const studentName = "Frank"; 
console.log(studentName);
// Frank

studentName = "Suzy"; // TypeError

SyntaxError는 프로그램 실행 전에 발생하는 오류이고 TypeError는 프로그램 실행중에 발생하는 에러이다. 따라서 const에서 TypeError는 컴파일 중에 발생하지 않는다.

재선언도 안된다.

const studentName = "Frank";

// obviously this must be an error
const studentName = "Suzy";

Loops

for (const i = 0; i < 3; i++) {
// oops, this is going to fail with
// a Type Error after the first iteration
}

Uninitialized Variables (aka, TDZ)

console.log(studentName);
// ReferenceError

let studentName = "Suzy";

studentName = "Suzy";   // let's try to initialize it!
// ReferenceError

console.log(studentName); 
let studentName;

var로는 잘됐는데 let은 ReferenceError가 난다.

let studentName = "Suzy"; 
console.log(studentName); 
// Suzy

var를 사용하면 studentName이 맨위에서 자동 초기화가 되는데 let과 const는 그렇지 못하다.

스코프 입력부터 변수 자동 초기화가 발생하는 기간을 지칭하기 위해 TC39에서 만든 용어는 TDZ (Temporal Dead Zone)이다. TDZ는 변수가 존재하지만 여전히 초기화되지 않았기 때문에 어떤 방식으로도 액세스 할 수 없는 것이다.

var은 기술적으로 TDZ가 있지만 길이가 0이므로 프로그램에서 관찰 할 수 없다. let과 const에만 관찰 가능한 TDZ가 있다.

askQuestion();
// ReferenceError

let studentName = "Suzy";

function askQuestion() {
  console.log(`${ studentName }, do you know?`);
}

실제로는 let과 const가 호이스팅 안되는게아니고 되지만 초기화가 안되는것이다.
논쟁의 여지는 자동 초기화가 호이스팅의 일부인지 여부이다.

var studentName = "Kyle"; {
  console.log(studentName);
  // ???
  // ..

  let studentName = "Suzy";
  console.log(studentName);
  // Suzy
}

다음 코드는 오류를 발생시킨다. 만약 호이스팅이 안된다면 첫번째 console에서 Kyle이 출려돼야한다. 따라서 우리는 호이스팅이 발생함을 알 수 있다. 초기화만 안됐을 뿐이다.