All Articles

호이스팅(Hoisting)

JS 입문 강의 들을 때 호이스팅이 대체 뭐냐 싶었는데 지금 듣는 강의에서 너무 쉽게 설명해주셔서 바로 이해함.

ES6 이전에는 상수와 변수를 선언할 때 모두 var를 사용했다.

console.log(name);  // 1번
var name = 'hello';
console.log(name);  // 2번

이렇게 하면 1번 console.log에서 에러가 나야할 것 같지만 그렇지 않다.

undefined  // 1번에 해당
hello  // 2번에 해당

이런 신통방통한 일이 일어난다. 왜? 상수/변수를 var로 선언하면 실제로는 이렇게 선언하는 것이 된다.

var name;  // 선언
console.log(name);
var name = 'hello';  // 할당
console.log(name);

var 선언과 함수 선언에 해당하는 것을 모두 끌어올려서 해당 범위 최상단에 선언하는 것인데, 이를 호이스팅이라 한다.

ES6에는 상수는 const, 변수는 let으로 구분해서 선언하는데, const와 let에서는 호이스팅이 일어나지 않아 변수 선언 전에 호출하면 ReferenceError가 발생한다.

console.log(name);
let name = 'world';
console.log(name);
console.log(name);
            ^

ReferenceError: Cannot access 'name' before initialization
    at Object.<anonymous> (/Users/NAON/Desktop/Coding/react/practice/prac/es6.js:1:13)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47