When Can I Use a Variable?

greeting();
// Hello!

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

다시, 식별자들은 컴파일 시에 등록되어 각 스코프의 처음 부에 생성된다. rmfjsep 식별자만 생성됐을 뿐인데 어떻게 값을 갖고 있는지에 대한 답은 function hoisting(선언식). 함수 선언시 자동으로 해당 함수 참조로 초기화한다.

Hoisting: Declaration vs. Expression

greeting();
// TypeError

var greeting = function greeting() {
    console.log("Hello!");
};
//TypeError 'undefined' is not a function,'greeting' is not a function.

ReferenceError는 참조 실패, 찾지 못했을 때인데 위의 에러는 찾았지만 함수가 아니라는 말.
var 변수 선언시 자동으로 undefined로 초기화가 되지만 표현식이니까 해당 줄 도달해서야 런타임 실행시 함수 할당 처리가 된다.

Variable Hoisting

변수도!

Hoisting: Yet Another Metaphor

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

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

은유긴 하지만 기본적인 규칙. 함수선언 먼저 호이스트 되고, 직후 변수들 호이스트 된다.
런타임 명령 생성하는 컴파일 동작으로 호이스팅이 사용되어야 한다고 필자 주장.
각 스코프에 들어갈 때마다 컴파일 작동(시작부 변수 자동 등록 런타임 명령)을 참조하기 위해서 호이스팅이 사용되어야 한다.

Re-declaration?

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

var studentName;//clearly a pointless no-op!
//스코프매니저: 있네(아무것도 안함)
console.log(studentName);   // ???
var studentName = undefined;
console.log(studentName);   // undefined <--- see!?

var greeting;

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

처음 변수가 등록됨. function hoisting 때문에 override됨.

const 초기화하지 않으면 SyntaxError(실행 전에 발견하고 실행하지 않음), 재할당 시에는 TypeError(실행 시 나타나는 에러)

Loop

var keepGoing = true;
while (keepGoing) {
    let value = Math.random();
  	//var 와의 차이?
    if (value > 0.5) {
        keepGoing = false;
    }
}

let은 스코프 인스턴스마다 적용되어서, var는 값만 바꾸는 것이기 때문에 재선언이 아니다.

💡참고

데이터 타입	객체	배열
for ...in	key return	index return
for ...of	error	값 return

for...in과 for...of에서 let과 const를 사용하는 것은 문제가 되지 않는다. let은 for문 역시 마찬가지이나, const는 재선언이 아닌 재할당 때문에 TypeError.

Uninitialized Variables (aka, TDZ)

컴파일러는 결국 선언자들을 지운 상태로 식별자들을 상단부에 등록하게 되는데, var는 undefined로 초기화하여 사용 가능하고, let, const의 식별자들만 등록했다가 선언된 부분에서 초기화가 이뤄져 그 전에는 사용할 수 없다. 등록한 곳부터 사용할 초기화가 이뤄지는 곳 사이를 Temporal Dead Zone (TDZ) 라고 한다.

askQuestion();
// ReferenceError

let studentName = "Suzy";

function askQuestion() {
    console.log(`${ studentName }, do you know?`);
  //선언 뒤 이뤄져 있지만 함수가 실행이 된 것은 선언 전이므로 Error, 즉, 위치가 아닌 정말 시간이다.
}

TDZ를 피하기 위해 let, const 선언은 각 스코프의 상단부에 두자.