[JS] 호이스팅(hoisting)

인터프린터가 JavaScript 코드를 해석함에 있어 Global 영역의 선언된 코드블럭을 최상의 Scope로 끌어올리는 것을 호이스팅(hoisting)이라 한다.

​

​

Global 영역에 선언된 변수 또는 함수는 JavaScript 엔진이 가장 먼저 해석하게 된다. 단 할당 구문은 런타임 과정이 이루어지기 때문에 hoisting되지 않는다.(?)

​

선언문은 항시 JavaScript 엔진 구동시 가장 최우선으로 해석한다고 이해하면 쉽다. 즉, 인터프린터가 JavaScript 코드를 해석하면서 코드작성 순서에 상관없이 global 영역에 선언되어 있는 변수나 함수의 선언문들을 먼저 수집하여 전역객체의 속성으로 등록시켜 둔다는 것이다. 그렇기 때문에 전역변수와 전역함수는 JavaScript 코드의 어떠한 위치에서도 실행이 가능한 것이다.

​

하지만 너무 많은 선언문을 남발한 JavaScript 코드는 실행 코드의 해석시점이 뒤로 밀리게 됨으로서 JavaScript 실행코드의 구동시점이 길어지는 좋지않은 결과를 가져올 수 있다.(성능이 떨어질 수 있다.)

​

hoisting에서 중요한 부분은 statement(선언)는 hoisting 되만 할당은 hoisting 되지 않는 다는 것이다. 즉, {} 안에 내용은 포함하지만 = 연산자를 사용한 값은 hoisting 되지 않는다.

 

 

 

// example 1: 함수선언에서의 hoisting
foo();
function foo() {
    console.log('hello');
};
> hello

// example 2: 함수표현에서의 hoisting
foo();
var foo = function() {
    console.log('hello');
};
> Syntax Error

 

 

위 코드에서 알수 있듯이 함수선언(example 1)은 foo(); 라는 실행코드를 해석하기 이전에 foo 함수에 대한 선언을 hoisting하여 gobal 객체에 등록시키기 때문에 오류가 없이 실행된다. 하지만 함수표현(example 2)은 변수에 함수리터럴을 할당하는 구조이기 때문에 hoisting되지 않으며 Syntax Error를 발생시킨다.

​

이러한 hoisting은 JavaScript 코드를 사람이 해석하는데 혼란을 주게 되어 선언문은 항상 최상위에서 작성하는 것을 권고하고 있다.

​

​

​

:: 참고

http://insanehong.kr/post/javascript-function/