호이스팅이란? 함수 내부의 선언문을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.
함수 선언식, var, let, const 경우 호이스팅이 일어난다.
자바스크립트에서 변수 선언은 선언->초기화
단계를 거쳐 수행한다.
undefined
를 할당해 초기화한다. var의 경우 선언과 초기화
가 동시에 일어나기 때문에 호이스팅이 되면 undefined가 일어난다.
console.log(a); ////undefined(초기화)
var a = 1
console.log(a); /// 1
catName("Chloe"); ///함수호출이 먼저 일어난다
function catName(name) {
console.log("My cat's name is " + name);
}
/*
위 코드의 결과는: "My cat's name is Chloe"
*/
하지만 let과 const의 경우에는 호이스팅이 일어나지만 선언과 초기화가 분리되어 진행되는데,
호이스팅이 되면 선언이 진행되고 초기화는 진행되지 않아 RefeerenceError
가 뜬다.
선언만 되었기 때문에 참조오류가 뜬다.
(let과 const가 호이스팅이 일어나지 않는다고 착각하지말자!)
console.log(a);///ReferenceError: a is not defined
let a = 1
console.log(a);
위의 예제와 같이 var와 let/const와 같은 범위 차이는 TDZ에 의해 제약을 받는다는 것이다.
즉, let/const 경우 변수가 초기화되기 전에 엑세스 하려고 하면 ReferenceError
가 발생한다. 이는 호이스팅을 수행하기 때문에 나타나는 에러이다.