[javascript] 호이스팅

호이스팅

let으로 변수를 선언하면 그 변수는 선언하기 전에 존재하지 않는다. var로 선언한 변수는 현재 스코프 안이라면 어디서든 사용할 수 있으며 선언하기도 전에 사용할 수 있다.

let을 쓰면, 변수를 선언하기전에 사용하면 에러가 난다.

x; // ReferenceError
let x = 3; // 에러가 일어나서 실행이 멈췄으므로 도달하지 못한다.

반면 var의 경우는 선언하기 전에도 사용할 수 있다.

x; // undefined
var x = 3;
x; // 3

var로 선언한 변수는 끌어올린다는 뜻의 호이스팅(hoisting)이라는 매커니즘을 따른다. 자바스크립트는 함수나 전역 스코프 전체를 살펴보고 var로 선언한 변수를 맨 위로 끌어올린다. 여기서 중요한 것은 선언만 끌어올려진다는 것이며, 할당은 끌어올려지지 않는다. 자바스크립트는 위 코드를 다음과 같이 해석한다.

var x; // 선언(할당은 아닌)이 끌어올려진다.
x; // undefined
x = 3;
x; // 3

var를 쓰면 혼란스럽고 쓸모없는 코드가 생길 수 있는데 왜 이런 키워드를 만든지 의문이 든다면 let 키워드가 만들어진 이유를 이해한 것이다. 언젠가는 let이 var를 완전히 대체할 것이라는데 그렇다면 왜 var와 호이스팅을 알아야 할까? 그 이유는 ES6를 어디에나 적용하려면 시간이 더 필요하기에 ES5로 트랜스컴파일 해야 하고 함수 선언 역시 호이스팅 되기 때문이다.

함수 호이스팅

f(); // 'f'
function f() {
  console.log("f");
}

변수에 할당한 함수 표현식은 끌어올려지지 않는다.

f(); // ReferenceError
let f = function () {
  console.log("f");
};