자바스크립트 호이스팅(hoisting)이란?

자바스크립트에서는 var 선언문 전에 변수를 사용해도 이미 선언된 것으로 간주한다.

이런 동작 방식을 "호이스팅"(hoisting)이라고 한다.

1. alert(typeof fn1); // undefined
2. alert(typeof value1); // undefined
3.  
4. var fn1 = function(){ ; };
5. var value1 = 'value1';
6.  
7. alert(typeof fn1); // function
8. alert(typeof value1); // string

1. 자바스크립트는 실행시 모든 변수가 선언 됩니다. 즉, 결과 에서 처럼 변수를 정의 하기전
결과는 모두 "undefined"를 반환 합니다.

2. 하지만 정의된 후의 결과는 각각 function 과 string을 반환 합니다.

1. alert(typeof fn1); // function
2.  
3. function fn1(){ ; };
4.  
5. alert(typeof fn1); // function

1. 하지만 위와 같이 함수 리터널 방식이 아닌 함수 선언문 방식으로 작성한 전역 fn1()
함수 객체는 var선언문 이전의 결과 에서도 function() 을 반환 합니다.

즉, 함수 선언문으로 선언된 변수는 호이스팅 동작에서 정의된 값이 위로 끌어 올려집니다.


아래 코드와 같이 함수 스코프 안에서도 전역과 똑같은 방식으로 호이스팅이 동작합니다.

1. function fn(){
2.    
3.     alert(typeof name); // undefined
4.     alert(typeof inner_fn); // function
5.  
6.     var name = 'name';
7.  
8.     function inner_fn(){
9.     }
10.  
11.     alert(typeof name); // string
12.     alert(typeof inner_fn); // function
13. }
14.  
15. fn();