[JavaScript] 호이스팅(hoisting) 이란?

영어의 어원부터 살펴보자.

옥스포드 영한사전 출처, hoist는 끌어올리다, 들어올리다 라는 뜻이다.

말 그대로 호이스팅은 자바스크립트에서 선언이 스크립트 상단으로 끌어올려지는 것을 의미한다.

 

어떤 상황에 호이스팅 될까?

---

1. 함수선언문

letHoist();	//is it works?

function letHoist(){
    console.log("is it works?")
}

위의 상황을 보자.

분명 자바스크립트는 위에서 아래로 순서대로 실행되는 언어인데 왜 함수 선언 전에 호출했는데도 실행이 될까?

 

이는 함수선언이 호이스팅 되기 때문이다.

위의 코드는 자바스크립트가 아래와 같이 읽는다.

function letHoist(){
    console.log("is it works?")
}

letHoist();

함수 표현은 호이스팅에 영향을 받지 않는다.

2. var을 이용한 변수 선언

 

 

자바스크립트는 변수를 선언할때

var, let, const 세개의 방법으로 선언 가능하다.

세가지 방법은 다 호이스팅이 되지만, var을 제외한 나머지는 호이스팅의 특징에 영향을 받지 않는다.

 

이 이유는 변수 선언 과정을 알아야 한다.

 

1> 선언 단계(Declaration)

    : 변수 객체에 변수 등록.

2> 초기화 단계(Initialization)

    : 등록된 변수를 메모리에 할당. 여기서 변수는 undefined로 초기화.

3> 할당 단계(Assignment)

    : 실제 값을 undefined에 할당.

 

그런데, var은 선언과 동시에 초기화가 이루어져서  선언보다 먼저 변수를 사용하면 에러가 나야 할 것이 undefined가 뜬다.

byVar;
var byVar = 6;
// undefined

let과 const는 아래와 같이 에러가 난다.

byLet;
let byLet = 5;
//Uncaught ReferenceError: byLet is not defined

byConst;
const byConst = 4;
//Uncaught ReferenceError: Cannot access 'byConst' before initialization

---

그래. 호이스팅의 특징은 알겠는데 그래서 왜 호이스팅을 피하려고 하는거지?

호이스팅 덕에 선언과 호출이 자유로워진거 아닐까?

 

호이스팅의 단점

호이스팅은 결과가 어느것일지 예측을 헷갈리게 만든다.

호이스팅이 아니면, 위에서 아래로 읽히고 선언과 할당, 호출을 순서로 어떤 값이 나올지에 대한 예측이 비교적 쉽다.

읽기 쉬운 코드가 어렵게 되는 건 정말 치명적이다.

 

마치 아래와 같은 상황이다.

var n = 4;
function hoistingN() {
  console.log(n);	//undefined
  var n = 6;
  console.log(n);	//6
}
hoistingN();

참고로 호이스팅은 함수가 있을 경우 해당 함수의 최 상단으로 끌어올려진다.

때문에, global scope인 4가 들어가지 않고, 할당이 안됐다는 뜻의 undefined와 이후에 할당된 6이 나오게 된다.

 

이를 해결하기 위해 나온 방법이 ES6의 let과 const다.

자바스크립트 공부를 얼마 하지 않은 나는 처음부터 const와 let으로 변수를 선언하는 습관을 들여 var이 어색하다...

 

---

참고:

Engineering blog https://www.daleseo.com/js-var-issues/

mdn https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript

Poeimaweb https://poiemaweb.com/js-data-type-variable#24-%EB%B3%80%EC%88%98-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85variable-hoisting