자바스크립트에서 호이스팅이란?

호이스팅(Hoisting)의 기본 개념

 

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

 

호이스팅 세부 개념

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

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

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

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

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

  1. 실제 메모리에서는 변화가 없다.

 

호이스팅의 대상

 

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

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

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

 

기본 예제

  console.log("hello");
  var myname = "김"; 
  let myname2 = "김";

 위의 코드와 같이 var와 let (또는 const)로 선언된 변수가 있다.

 

JavaScript Parser에 의해 호이스팅은 다음과 같이 이루어진다.

  var myname; // [Hoisting] "선언" 
  console.log("hello");
  myname = "김"; //할당  
  let myname2 = "김"; [Hoisting] 발생 X

 

 

함수 선언문과 표현식의 호이스팅

 

• 함수 선언문의 호이스팅

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

function printName(firstname) {
    var result = inner(); // "선언 및 할당"
    console.log(typeof inner); // > "function"
    console.log("name is " + result); // > "name is inner value"

    function inner() { // 함수선언문 
        return "inner value";
    }
}

printName(); // 함수 호출 

• JavaScript 내부의 호이스팅 결과(위와 동일)

function printName(firstname) { // 함수선언문 
    var result // [Hoisting] var 변수 선언
    
      function inner() { // [Hoisting] 함수선언문 
        return "inner value";
    }
    
    result = inner() // 할당
    console.log(typeof inner); // > "function"
    console.log("name is " + result); // > "name is inner value"
  
}

printName(); // 함수 호출 

 

• 함수 표현식의 호이스팅

함수 표현식은 함수 선언문과 달리 선언과 호출 순서에 따라서 정상적으로 함수가 실행되지 않을 수 있다. 표현식에서는 선언과 할당의 분리가 발생한다.

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

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

 

• JavaScript 내부의 호이스팅 결과(위와 동일)

 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를 쓰면 혼란스럽고 쓸모없는 코드가 발생하게된다. 요즘은 let, const를 사용한다.

함수와 변수를 가급적 코드 상단부에 선언하면 호이스팅으로 인한 스코프 꼬임 현상은 방지가능하다.