1. 개요
Hoisting자바스크립트 및 액션스크립트 코드를 인터프리터가 로드할 때, 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되어 변수의 선언을 항상 컨텍스트 내의 최상위로 끌어올리는 것을 의미한다. 이는 오로지 변수에만 해당되는 것은 아니고 함수도 가능하며, 자바스크립트에서 함수의 호출을 첫 줄에서 하고 마지막 줄에 함수를 정의해도 문제없이 작동되도록 하는 유용한 특성이다.
2. 부작용
그러나 호이스팅은 생각지도 못한 곳에서 버그를 일으키는 만악의 근원이 되기도 한다.가령 아래와 같은 코드가 있을 경우,
#!syntax javascript
function sum (a, b) {
var x = add(a,b);
return x;
function add (c, d) {
var result = c+d;
return result;
}
}
자바스크립트 인터프리터는 아래와 같이 읽는다.
#!syntax javascript
function sum (a, b) {
var x = undefined;
function add (c, d) {
var result = c+d;
return result;
}
x = add(a,b);
return x;
}
변수의 경우 어디서 어떻게 선언을 하더라도 항상 컨텍스트내의 최상위로 끌고올라온 뒤 'undefined'를 할당해 둔다. 이후 함수 선언을 끌고 올라오고 난 뒤 변수의 할당과 함수의 실행문을 순서대로 가져온다. 즉 호이스팅은 자바스크립트 인터프리터가 코드를 읽는 방식이며, 이를 이해해야 원치않는 'undefined'가 출력되는 것을 막을 수 있다.
ECMAScript 6판에서는 var나 function declaration대신에 추가된 let이라는 예약어를 사용하면 호이스팅을 막을 수 있다. 정확히 말하자면, let을 사용한다고 호이스팅이 일어나지 않는 것이 아나라, 호이스팅이 일어나 스코프 내 최상위로 끌어올려지지만, 'undefined'를 할당하지 않기 때문에 'undefined'가 출력되는 것이 아니고 참조에러가 발생하게 된다. ES6 이후로 실제 현업에서는 var 키워드는 절대로 쓰이지 않으며 99%이상의 경우 모든 함수를 무조건 const와 arrow syntax로 선언하기 때문에 최근 들어서는 사실상 크게 신경쓰지 않는 부분이 되었다.
최근 자바스크립트 개발자 면접에서 아직도 호이스팅을 물어 보는 이유가 뭐냐는 Dan Abramov의 트윗 # 이 화제가 되었는데, 호이스팅이 어떤 문제를 풀려고 했으며 그 문제를 현대 JS에서는 어떻게 다루는지 대해 알고 있으면 나쁘지 않다고 보는 견해도 있다.