javascript 함수 표현식, 함수 선언식 (호이스팅)

호이스팅(Hoistin)

-> 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것.

 

자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.

    - 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 흝는다.

    - 함수 안에 존재하는 변수 / 함수선언에 대한 정보를 기억하고 있다가 실행시킨다.

    -유효범위 :  함수 블록 {} 안에서 유효

 

즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는것이다.

    - 실제로 코드가 끌어올려지는건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다.

    - 실제 메모리에서는 변환가 없다.

 

호이스팅의 대상

 

    - var 변수 선언과 함수 선언문에서만 호이스팅이 일어난다.

        @ var 변수/ 함수 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.

        @  let/const 변수 선언과 함수 표현식에서는 호이스팅이 발생하지 않는다.

 

 

함수 선언문에서의 호이스팅

    -  함수 선언문은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨위로 끌어 올려진다

 

 

함수 표현식에서의 호이스팅

   - 함수표현식은 함수 선언문과 달리 선언과 호출 순서에 따라서 정상적으로 함수가 실행되지 않을 수있다.

   @ 함수 표현식에서는 선언과 할당의 분리가 발생한다.

 

1. 함수표현식의 선언이 호출보다 위에 있는 경우 - 정상출력

 

function printName(firstname) { // 함수선언문
     var inner = function() { // 함수표현식 
         return "inner value";
     }
        
     var result = inner(); // 함수 "호출"
     console.log("name is " + result);
 }

 printName(); // > "name is inner value"

------------------------------------------------------------

/* 정상 */
 /** --- JS Parser 내부의 호이스팅(Hoisting)의 결과 - 위와 동일 --- */
 function printName(firstname) { 
     var inner; // [Hoisting] 함수표현식의 변수값 "선언"
     var result; // [Hoisting] var 변수값 "선언"

     inner = function() { // 함수표현식 "할당"
         return "inner value";
     }
        
     result = inner(); // 함수 "호출"
     console.log("name is " + result);
 }

 printName(); // > "name is inner value"

------------------------------------------------------------

 

호이스팅 우선순위

 

같은 이름의 var 변수 선언과 함수 선언에서의 호이스팅

 

- 변수 선언이 함수 선언보다 위로 끌어 올려진다.

 

TIP.  호이스팅 사용시 주의 

 - 코드의 가독성과 유지보수를 위해 호이스팅이 일어나지 않도록 한다.

     :  호이스팅을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에 선언하면, 호이스팅으로 인한 스코프 꼬임 현상은 방지 할수 있다.

     :  let/const 를 사용한다.

 

 - var 를 쓰면 혼란스럽고 쓸모없는 코드가 생길 수있다. 그럼 왜 var와 호이스팅을 이해해야 할까?

      : ES6를 어디에서드 쓸 수 있으려면 아직 시간이 더 필요하므로 ES5로 트랜스컴파일을 해야한다.

      : 따라서 아직은 var가 어떻게 동작하는지 이해해야한다.