스코프(3)

호이스팅

ES6가 도입되기전 함수 내에서 변수를 선언할때 let을 도입하기 전 var를 사용했습니다. let으로 변수를 선언할 경우 선언이 되어지기 전에는 변수를 사용할 수 없습니다. 하지만 var로 변수를 선언하면 변수를 선언하기 전에 사용할 수 있습니다.

Example

var1;         // Error
let var1;     // undefined
x;            // undefined
var x = 3;     
x;            // 3

이와 같이 선언되지 않은 변수가 에러가 나지 않는 이유는 호이스팅 때문입니다. 호이스팅이라는 것은 변수가 적용되는 스코프 내에서 가장 위에서 var를 이용한 변수 선언이 적용된는 것입니다. 하지만 선언과 할당을 같이 한다고 해서 할당까지 함께 끌어 올려지는 것이 아닌 오직 선언만이 끌어올려집니다.

함수 호이스팅

함수도 마찬가지로 호이스팅이 됩니다. 하지만 함수를 변수에 할당하면 호이스팅 되지 않습니다.

f();
function f() {
    console.log(1)
}                      // no Error

f2();
let f2 = function() {
    console.log(2)
}                      // f2 is not a function

아까도 얘기했다시피 호이스팅은 피하는 것이 가장 좋다. 호이스팅이 적용될 경우 코드의 가독성이 떨어지기 때문에 좋지 않은 영향을 끼칠 수 있다. 그래서 ES6에서 let을 새로이 내놓았고 가급적이면 let이나 const변수를 이용하는 것이 좋을 것이다. 하지만 ES5로 트랜스 컴파일을 해야함으로 우리는 var와 호이스팅에 대한 이해를 해야합니다.

출처

https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html 러닝 자바스크립트 : 한빛미디어