[JS] 호이스팅, Hoisting

JavaScript는 인터프리터 언어이다. 

Script 엔진의 인터프리터가, 실행해야 하는 라인에 진입했을때 , 해석하는 과정에서 진입한 스코프안쪽에 선언되어 있는 함수 및 변수를 스코프의 맨 위로 끌어 올리게 된다. 이것을 호이스팅이라고 한다.

흐름을 보면 호이스팅이라고 표현되는 상황은, 인터프린터가 코드를 해석하는 과정에서 발생한다. 

• 어디에도 선언되지 않은 count에 접근하려 하기 때문에 당연히 ReferenceError 가 발생할 것이다.

( function (){
    console.log('count:',count); // ReferenceError: count is not defined
})();

• global scope에서 할당된 값인 100을 출력할  것이다.

var count = 100;
( function (){
    console.log('count:',count); // count:100
})();

• global scope에서 할당된 값인 100을 출력하던 count가 undefined를 출력한다.

var count = 100;
( function (){
    console.log('count:',count); // count:undefined
    var count = 0;
})();

위의 코드는 인터프리터에서 아래와 같은 느낌으로 해석. 자신의 스코프에 있는 count를 참조하게 되는 모습.

var count = 100;
( function (){
    var count;
    console.log('count:',count); // count:undefined
    count = 0;
})();

• 호이스팅의 개념을 이해하지 않고 본다면 아래와 같은 형식의 코드에서 3번 라인에서 약간은 혼란스러울수도 있다.

var count = 100;
( function (){
    console.log('local count:',count); // local count:undefined
    var count = 0;
    console.log('local count:',count); // local count:0
})();
console.log('global count:',count); // global count:0