javascript hoisting(호이스팅) 이란

(참고 : http://insanehong.kr/post/javascript-function/)

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

함수, 변수등을 아래에 선언하더라도 js엔진이 이것들을 실행블럭의 최상단으로 할당한다.

여기서 실행블럭이라 하면 js는 함수(function)단위이다.

헌데 대입(=)구문으로 들어간 것들(변수에 할당된것)은 따라 가지 않고 {} 로 선언된 것들만 최상단에 자동으로 위치하게된다.

즉, function a(){~~~} 는 호출구문 아래 작성되었더라도 엔진에 의해 블럭의 최상단으로 옮겨져 해당 함수를 어디서든 호출하여도 에러가 나지 않지만 var a='a' 로 선언된것은 var a='undefined'; ~~~ a='a'; 처럼 undefined 로 먼저 블럭의 최상단에 선언된후 작성된 위치에서 할당과 실행이 이루어진다.

그러니 뭔가를 선언하고자 한다면 블럭의 최상단에 하는것이 오류를 미리 예방할 수 있다.

(공부하면서 작성한것이라 오류/오타가 있을수 있음)

예:::

함수 -

a(); //---> print 'a'

function a(){

console.log('a');

}

a(); //---> error

var a=function(){

console.log('a');

};

===> 실제 컴파일된 모습은 아래와 같다

var a='undefined'; //---> 당연히 함수가 아니니 정의되지 않은 함수라고 나올것이다.

a();

a=function(){

console.log('a');

};

변수 - 

var a = 'a';

(function(){

console.log(a); //--->print 'undefined'

var a = 'b';

}());

console.log(a); //---> print 'a' 

::: 특이한점은 b 가 아닌 a가 출력된다. js 변수 할당은 함수단위의 변수이므로 함수내에서 선언된 변수는 global 변수에 영향을 미치지 않는다. 함수내 var a는 함수를 빠져나오면서 소멸(?)된다.

하지만 var 없이 a='b' 하게된다면 a가 아닌 b가 출력될것이다.

===> 실제 컴파일된 모습은 아래와 같다

var a='a';

(function(){

var a='undefined';

console.log(a);

a = 'b';

}());

console.log(a);