호이스팅 (Hoisting)

호이스팅(Hoisting)은 자바스크립트에서 가장 유명한(?) 특징이다.

우선,

Hoist 의 사전적 의미는 들어올리다, 게양하다 의 뜻이 있다.

국기 게양이 영어로 flag hosting 이라고 한다.

생각보다 실생활에 밀접한 영어 단어였던 호이스팅..

사실 나는 학교수업에서 자바스크립트를 이용할때 처음 들어봤다.

 

아무튼 호이스팅을 이해하기 위해 예제를 먼저 살펴보자.

console.log(score);

var score;

모던 자바스크립트 딥다이브책 [예제 04-05]

 

음.. 이건 인터프리터 특성 상 위에서 아래로 한 줄씩 순차적으로 실행되어야 하니까 참조 에러(ReferenceError)가 발생해서 빨간색 좀 보겠군! 이라고 생각했지만 undefined가 출력이 된다. 즉, 잘 실행이 된다.

 

이번에는 함수 케이스의 예제를 살펴보자.

catName("클로이");

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}

MDN 호이스팅 예제

 

위 소스 예제는 함수를 선언하기 전에 호출을 해버린 상황이다. 

인터프리터 개념으로만 생각하면 당연히 에러가 발생한다고 생각하겠지만,

뉘앙스 상 정상적으로 실행이 되겠군! 생각했을 것이다.

 

위 두 예제들과 같이 인터프리터가 한 줄씩 소스코드를 순차적으로 실행하기 이전에 선언문들이 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 호이스팅 이라고 한다.

 

조금 더 자세히 알아보기 위해 자바스크립트 엔진이 소스코드를 실행하기 까지의 과정을 살펴보자.

1. 소스코드 실행 전 소스코드 평가 과정을 거치는데, 그 과정에서 변수 선언, 함수 선언 등 모든 선언문을 소스코드에서 찾아낸다.

2. 찾아낸 선언문들을 먼저 실행한다.

3. 소스코드 평가를 끝내고 선언문이 있는 부분은 제외하고 한 줄씩 순차적으로 실행한다.

 

위 과정을 통해 마치 선언문들이 위로 끌어올려진 것처럼 실행되는 것이고 그래서 호이스팅이라는 이름이 붙었다.

var, let, const, function, function*, class 키워드를 사용하는 모든 식별자(변수, 함수, 제너레이터함수, 클래스 등)는 호이스팅 된다.

선언만이 호이스팅 대상이고 초기화는 호이스팅 대상이 아니다.

console.log(num);
var num = 6;

즉, 위와 같이 선언과 초기화를 동시에 했더라도 console에는 undefined가 찍힌다.

var 키워드의 경우 암묵적으로 undefined로 초기화를 하지만, let과 const의 경우 초기화되지 않는다. 
즉, 이전 애플리케이션이 사용했던 값이 남아 쓰레기값(Garbage Value)이 남아 있을 수 있다.

그렇다면 const 혹은 let을 var자리에 넣으면 쓰레기 값이 나올까?

실행해보자.

console.log(num);
const num = 6; // 혹은 let

어라? ReferenceError가 뜬다.

ReferenceError

어떻게 된것인지 MDN Docs에 찾아보니까 

ECMAScript 2015의 let (const)는 변수를 블록의 상단으로 올리지 않습니다.
변수가 선언되기 전에 블록 안에서 변수를 참조하게 되면 ReferenceError를 발생시키게 됩니다.
변수는 블록 시작부터 선언이 처리될 때까지 'temporal dead zone'에 위치하게 됩니다.

TDZ(Temporal Dead Zone)에 의해 ReferenceError가 발생한 것이라고 한다.

let과 const도 마찬가지로 호이스팅되지만, 초기화 되기 전에 접근하게 된다면 에러를 발생시켜 버그를 쉽게 찾아낼 수 있게 한 것이다. 즉, 호이스팅이 되지 않는것처럼 TDZ에 위치시킨다는 뜻이다.

가급적 var보다는 let과 const를 사용하라는 말을 많이 들어 무작정 그렇게 사용하고는 있었는데

런타임에 초기화 안된 오류를 잡아낼 수 있기 때문에 안정성이 좋아서 그런거구나 깨달았다.

 

 

[자료 출처]

1. 모던자바스크립트 딥다이브

2. MDN

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

호이스팅 - 용어 사전 | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Grammar_and_types

문법과 자료형 - JavaScript | MDN