Hoisting/함수선언식과 표현식에서의 차이

* 자바스크립트의 호이스팅(Hoisting)

function getX(){
    console.log(x);  //undefined
    var x = 100;  
    console.log(x);  //100
   }
 getX();

hoist : 끌어올리기 - 자바스크립트에서 끌어올려지는 것은 변수 

- 호이스트 란, 변수의 정의가 범위에 따라 선언 과 할당으로 분리되는 것을 의미한다. 

// 작동 순서
function getX(){
	var x;    //undefined
    console.log(x);
    x = 100;  // 100
    console.log(x);
   }
 
 getX();

'선언문'은 자바스크립트 엔진 구동시, 가장 최우선으로 해석하고, 

'할당 구문'은 런타임 과정에서 이루어지기 때문에, 호이스팅 되지 않는다. 

 

- 함수 선언이 함수 실행 부분보다 뒤에 있어도, 자바스크립트 엔진이 함수 선언 을 끌어올린다. 

( 호이스팅은 변수를 끌어올리지만,  함수이던, 변수값이던 할당되기 전이므로 undefined 가 할당된다.  )

---

 * 함수 선언식 / 함수 표현식 

function test(){
	var inner = function(){
        return "inner value";
    } //함수 표현식 - 변수에 함수 표현식을 담아놓는 것 

    var result = inner();
      console.log("name is " +result);
  }
  
  test();  // name is inner value

먼저 정의된 함수 표현식을 아래 변수에서 사용 가능 

function test(){
  	 var result = inner(); 
        // js 파서가 전체 훑어서 아래에 있는 함수 기억 -> 실행 
        console.log("name is "+result);
      
        function inner(){
            return "inner value";
        } 
   }
   
  test();  // name is inner value

 

function test(){
        var result = inner();
        console.log("name is " +result);

        var inner = function(){
            return "inner value";
        } 

}
test();  //TypeError : inner is not a funtion

두 코드의 차이점 - 함수inner 의 정의 부분 

- 1) function inner() 형태로 함수 선언문 

- 2) var inner = function() 형태로 함수 표현식, 함수를 변수에 대입

                                : 변수 자체에 할당된 값(여기서는 함수) 은 호이스팅 불가능 

// (2) 의 작동순서 
function test(){
		var inner;  // 호이스팅 
        var result = inner();
        console.log("name is " +result);

        inner = function(){
            return "inner value";
        } 
}
test();  //TypeError : inner is not a funtion