javascript hoisting 이란

호이스팅(hoisting)이란?

w3schools(https://www.w3schools.com/js/js_hoisting.asp)에서는 호이스팅에 관해 아래와 같이 설명한다.

Hoisting is JavaScript's default behavior of moving declarations to the top. (Hoisting은 선언을 최상단으로 이동시키는 JavaScript의 기본 동작이다.)

다시 말하자면, Hoisting이란 var 키워드를 사용하여 변수를 선언 시, 해당 변수가 속한 범위(scope) 최상단으로 올려버리는 현상을 일겉는다. 그러나 여기서 중요한 부분은은  범위가 다른 언어처럼 block 레벨이 아니라 function 레벨이라는 점입니다.

아래의 코드에서 y가 undefined가 출력되는 이유가 바로 호이스팅 때문이다.

var x = 1; // x 초기화
console.log(x + " " + y); // '1 undefined'
var y = 2;

다시말해 위의 코드는 아래와 같이 해석할 수 있다.

var x = 1; // x 초기화
var y;
console.log(x + " " + y); // '1 undefined'
y = 2;

여기서 중요한 점은 JavaScript는 초기화가 아닌 선언만 끌어올린다는 것이다.

또 다른 예를 들면 

var sum = 0;
for (var i = 0; i < 10; i++) {
  sum += i;
}
console.log('sum:', sum);
console.log('i:', i);

위의 코드의 실행 값은 아래와 같다. 

sum: 45
i: 10

위와 같은 결과가 나오는것 또한 호이스팅 때문이고 그범위가 block 레벨이 아니라 function 레벨이기 때문이다. 따라서 위의 코드는 아래와 같이 보면 해석하면 된다.

var sum = 0;
var i;
for (i = 0; i < 10; i++) {
  sum += i;
}
console.log('sum:', sum);
console.log('i:', i);

참고페이지 : http://www.daleseo.com/js-var-issues/