hoisting

호이스팅을 공부하기 전에 먼저 var, let, const가 뭐가 다른지부터 알아야한다.

var

es6 이전에 쓰였던 변수 선언으로 let, const가 잘 동작하지 않는 브라우저가 있어서 현재도 var가 쓰이는 경우가 있다고 들었다.

재할당, 재선언 가능!

var name = "Kim Sang Yeon"
console.log(name); // Kim Sang Yeon

var name = "Zed Kim"
console.log(name); // Zed Kim

let

재할당은 가능하나 재선언 불가!

let name = "Kim Sang Yeon"
console.log(name); // Kim Sang Yeon

let name = "Zed Kim"
console.log(name); // Uncaught SyntaxError: Identifier 'name' has already been declared 

name = "Zed Kim" // Zed Kim

const

재할당, 재선언 불가!

const name = "Kim Sang Yeon"
console.log(name); // Kim Sang Yeon

const name = "Zed Kim"
console.log(name); // Uncaught SyntaxError: Identifier 'name' has already been declared 

name = "Zed Kim" // Uncaught SyntaxError: Identifier 'name' has already been declared

Hoisting

모든 변수 선언은 호이스트 된다.
호이스트란 변수의 정의가 그 범위에 따라 선언, 초기화와 할당으로 분리되는 것을 의미
즉, 변수가 함수 내에서 정의되었을 때 선언이 함수의 최상위로, 함수 바깥에서 정의되었을 경우 전역 컨텍스트의 최상위로 변경

var로 선언되는 변수와 다르게, let으로 선언된 변수는 선언문 이전에 참조하면 ReferenceError가 발생

var

var로 선언되는 변수는 선언과 초기화가 한 번에 이루어짐
따라서 선언문 이전에 변수에 접근하여도 스코프에 변수가 존재하기 때문에 에러가 나지 않고 undefined를 반환
이후 변수 할당문에 도달하면 비로소 값이 할당

console.log(hoisting) // undefined

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

hoisting = 1;
console.log(hoisting) // 1

let

let으로 선언된 변수는 선언과 초기화가 분리되어 이루어짐
스코프에 변수를 등록하지만 초기화 단계는 변수 선언문에 도달했을때 이루어짐
초기화 이전에 변수에 접근하려고 하면 ReferenceError가 발생.
스코프 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없음.
이 구간을 일시적 사각지대(TDZ / Temporal Dead Zone)라고 부름.

console.log(hoisting) // Uncaught ReferenceError : Cannot access 'hoisting' before initialization

let hoisting;
console.log(hoisting) // undefined

hoisting = 1;
console.log(hoisting) // 1