JAVASCRIPT - HOIST (호이스트) 란

---

개요

1. Hoist란?
2. 선언부, 할당부
3. 변수 호이스트
4. 함수 호이스트

---

 

 

 

 

1. Hoist란?

Hoist의 영어적 의미를 찾아보면 다음과 같다

(흔히 밧줄이나 장비를 이용하여) 들어[끌어]올리다 --
naver 검색

 

그렇다면 자바스크립트(Javascript)에서는 어떤 의미로 사용될까?

• javascript에  hoisting은 변수/함수를 상단으로 들어[끌어]올리는 것을 말한다.

이게 무슨말이냐 하면,

var hoisted = "true";

 

hoisted 라고하는 변수를 scope 내 상위로 끌어올려 선언을 먼저 한다는 뜻이다.

여기서 진짜 엄청 중요한게..

• "선언한다"와 "할당하다"는 다르다는 것이다.

 

 

 

 

 

 

2. 선언부, 할당부

그럼 위의 코드를 선언부와 할당부로 나눠보자.

// 선언부 
var hoisted;

// 할당부
hoisted = "true";

• 선언부는 변수가 존재할 것이다를 알리는 것이고,
• 할당부는 해당 변수에 값이 대입되는 부분이다.

 

 

 

 

 

3. 변수 호이스트(Hoist)

 

선언부와 할당부를 어떻게 구분하는지 알았으니, 이제 이 두개의 차이가 어떻게 다른지 알아보자.

function hoistTest_ONE(){
   console.log(hoistOne);
   var hoistOne = "hoistOne";
}


function hoistTest_TWO(){
   console.log(hoistTwo);
}

hoistTest_ONE();
// undefined

hoistTest_TWO();
// "Error" ReferenceError: hoistTwo is not defined.

위의 코드에서도 볼수 있듯이, 첫번째 함수를 실행하면 함수는 에러 없이 진행되며, console.log 역시 undefined 를 뱉는다.

하지만 두번째 함수를 실행해보면 ReferenceError 를 뱉는 것을 알 수 있다. 

 

hoistTest_ONE() 은

var hoistOne = "hoistOne"; 

 

위와 같은 코드라인이 hoisting 되어 hoistOne이라는 변수를 함수 실행 최상단에서 선언해둔다.
선언은 되었지만, 할당은 되지 않았으므로 , 할당 전에 console.log 하게 되면, undefined 를 리턴한다. 

 

하지만 hoistTest_TWO() 에서는 hoistTwo 라는 변수 선언이 없기 때문에, 해당 라인은 ReferenceError 를 뱉게 되는 것이다.

 

 

 

그렇다면 위에서 말한 이 말은 무슨 뜻인가?

hoisted 라고하는 변수를 scope 내 상위로 끌어올려 선언을 먼저 한다는 뜻이다.

function hoistTest_ONE(){
   console.log(hoistOne);
   var hoistOne = "hoistOne";
}


function hoistTest_THREE(){
   console.log(hoistOne); // hoistTest_ONE 에서 사용한 변수 사용
}

hoistTest_ONE();
// undefined

hoistTest_THREE();
// "Error" ReferenceError: hoistOne is not defined.

위에서 사용한 hoistTest_ONE 에, hoistTest_THREE 함수를 살펴보자.

hoistTest_THREE()를 보면, hoistTest_ONE()에서 사용된 hoistOne 변수를 console.log 하였다. 결과는 ReferenceError!

 

왜 그런지 설명을 하면,

• 호이스팅(hoisting)은 모든 변수/함수를 최상위로 끌어올리는 것이 아니라,
• scope에 따라 끌어올려지는 위치가 다르다.

간단하게 말하면, 전역변수인가, 지역변수인가에 따라 호이스팅(hoisting)되는 위치가 다르다.

 

지금까지는 변수에 대해서만 알아봤다면, 함수 호이스팅은 어떻게 될까?

 

 

 

 

 

4. 함수 호이스(hoist)

함수를 선언할 경우 함수는 항상 최상단으로 호이스팅(hoisting)된다. 이게 무슨 말이냐면, 함수가 선언되기도 전에 함수를 호출하더라도, 함수가 잘 실행이 된다.

hoistFunction_ONE(); // "Hello World"

function hoistFunction_ONE(){
  console.log("Hello World");
}

 

 

모두 알다 시피, 이 경우에 함수가 잘 실행되는 것은 안다. 하지만 이게 호이스팅(hoisting) 덕분이라는 걸 모르는 개발자가 많다.

그리고 이게 "함수 선언" 일 경우에만 해당된다.

 

자바스크립트는 함수가 변수로도 지정이 된다. 아래에 코드를 보자. 

(변수 선언 함수의 예)

testFunction_TWO();
// testFunction_TWO is not a function

var testFunction_TWO = function(){
  console.log("Hello World");
}

 

코드를 보면 알 수있겠지만, testFunction_TWO는 함수 선언이 된게 아니라, 변수선언으로 함수를 할당해 두었음을 알 수 있다.

이 경우 testFunction_TWO는 변수 선언으로 인식되어, 함수할당이 되지 않는다.

어떻게 동작하고 있는지 다 알겠지만 그래도 코드로 풀어보면,

var testFunction_TWO; // 변수 선언부

testFunction_TWO();

testFunction_TWO = function(){ // 변수 할당부
  console.log("Hello World");
}

이렇게 선언부와 할당부가 갈리기 때문에, 해당 코드를 수행할 수 없다.

 

 

 

 

Reference 

JavaScript: Understanding the Weird Parts

JavaScript: Understanding the Weird Parts

var statement

var