javascript - 호이스팅(hoisting)

호이스팅 - 함수 내의 모든 선언들을 해당 함수 최상단으로 끌어올려 선언하는 것

• {}블럭 안에서 유효
• 자바스크립트 parser가 함수 실행 전 한번 훑어 선언부를 모두 최상단으로 끌어올림
• 메모리 상의 변화는 없다.
• 최대한 호이스팅이 일어나지 않도록 함수 선언을 let, const 와 같이 선언한다.

 

 

함수 선언문과 함수 표현식 에서의 Hoisting

 

함수 선언문

    
    
    
    
  
function print() {
    var result = inner();
    console.log('javascript - ' + result);
    
    function inner() {
        return 'hoisting'
    }
}
 
print();
 
// 'javascript - hoisting 정상 출력

 

함수 표현식

    
    
    
    
  
function print() {
    var result = inner();
    console.log('javascript - ' + result);
    
    var inner = function() {
        return 'hoisting'
    }
}
 
//ERROR
Uncaught TypeError: inner is not a function
    at print (<anonymous>:2:18)
    at <anonymous>:1:1

 

동일한 이름의 변수, 함수 간의 Hoisting

 

• 변수 선언이 함수 선언보다 우선시 된다.

    
    
    
    
  
 var myName = "Heee"; // 값 할당 
  var yourName; // 값 할당 X
 
  function myName() { // 같은 이름의 함수 선언
      console.log("myName Function");
  }
  function yourName() { // 같은 이름의 함수 선언
      console.log("yourName Function");
  }
 
  console.log(typeof myName); // > "string"
  console.log(typeof yourName); // > "function"

 

 

출처 : gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html