[ES6] 호이스팅(Hoisting)

Hoisting(호이스팅)

통상적으로 컴파일러는 컴파일을 할 때 위에서 아래로 읽기 때문에 상식적으로 어떤 변수를 참조하는 처리문보다 아래에 변수를 선언하면 안 된다. 근데 JS에서는 변수가 처리문보다 밑에 있어도 에러가 뜨지 않고 변수 선언을 위로 끌어올려 읽는다. 이를 JS에서 '호이스팅' 이라한다. 

변수의 호이스팅

console.log(num); // undefined

var num = 3; // var 변수 선언

console.log(num); // 3

첫 번째 줄에서 에러가 뜨는게 상식적으로 맞지만 JS에서는 아래에 선언한 num이 있으므로 'var num;'이 호이스팅 되어 undefined가 나오게 된다. 호이스팅은 정의는 해당되지 않고 선언만 해당되기에 저러한 결과가 나오게 된다. 그렇다고 변수를 참조하는 처리문보다 변수 선언을 아래에 하는 것은 좋지 않으므로 하지 않는게 좋다.

console.log(num); // ReferenceError num is not defined

let num = 3; 

let 혹은 const 키워드로 정의한 변수는 또 다르게 처리문보다 위에 선언 해주어야 에러가 나지 않는다.

함수의 호이스팅

let name;

getName();

console.log(name); // "Chris"

function getName(){ //함수 선언식으로 정의(선언과 정의를 동시에)

name = 'Chris';

}

함수도 역시 선언식인 경우 호이스팅이 되어 위와같이 작성해도 에러가 나지 않는다.

let name;

getName();

console.log(name); // SyntaxError: Unexpected token function

let function getName(){

name = 'Nick';

}

let 키워드로 변수 형태로 선언한 함수는 호이스팅이 되지 않는다. 그래서 항상 처리문보다 위에 선언해야한다.