호이스팅(Hoisting)을 알아보자

호이스팅(Hoisting)이란?

호이스팅은 변수 선언이 스코프의 선두로 끌어올려진 것처럼 동작하는 자바스크립트 고유의 특징을 말한다.

 

console.log(score); // undefined

var score; // 변수 선언

변수 선어문보다 변수를 참조하는 코드가 앞에 있을 경우 자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행되기 대문에 console.log(score)가 먼저 실행된다. 그럼 변수가 선언되기 전 참조되었기 때문에 오류를 발생할 것이라고 생각하겠지만 실제로는 오류가 발생되지 않는 이유가 호이스팅 때문이다.

 

변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 런타임이 아니라 그 이전 단계에서 먼절 실행되기 때문!

 

Javascript는 소스코드의 평가 과정을 거치면서 소스코드를 실행하기 위한 준비를 하는데 해당 준비 단계에서 변수 선언을 포함한 모든 선언문(변수 선언문, 함수 선언문, 등)을 소스코드에서 찾아내 먼저 실행 후 모든 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 실행한다.

즉, 변수 선언이 소스코드 어디에 위치했는지와 상관없이 어디서든 변수를 참조할 수 있다!

 

단, 할당문 이전에 변수를 참조하면 언제나 undefined를 반환한다.

// 1. 변수 선언 (호이스팅에 의해 변수가 선언된다.)
// 2.초기화 단계
console.log(foo) // undefined

// 3. 할당 단계
foo = 123; //변수 할당

console.log(foo); //123

// 변수 선언
var foo;

+ 선언문만 위로 올라가기 때문에 선언과 동시에 할당을 해도 undefined로 반환한다.

// 1. 변수 선언 (호이스팅에 의해 변수가 선언된다.)
// 선언만 되는 것이고 할당은 되지 않는다.
// 2.초기화 단계
console.log(test) // undefined

// 변수 선언 및 할당
var test = "test";

console.log(test); // test

 

그럼 var 말고 let과 const는 호이스팅이 될까??

 

let과 const도 호이스팅이 된다! 그러나

let과 const는 var와 달리 undefined로 나오지 않고 ReferenceError: 변수명 is not defined으로 오류를 반환한다.

 

이는 호이스팅되지 않아서 오류가 발생한 것이 아니다. 호이스팅이 발생하기 때문에 ReferenceError가 발생한 것이다.

ps) ES6부터 모든 선언(var, let, const, function, class, 등)이 호이스팅된다.

 

오류 발생 원인 

 var는 선언과 동시에 초기화를 해주지만 let과 const는 선언과 초기화 단계가 각각 따로 진행되어 호이스팅시 변수는 등록 등록이 되지만 메모리가 할당되지 않아 ReferenceError가 발생한다.

TDZ(Temporal Dead Zone)란?

변수(let, const) 선언은 호이스팅으로 초기에 되지만 초기화가 되기 전까지 TDZ라는 곳에 머물러 초기화가 될 때까지 잠시 '죽어있는 상태'이기 때문에 선언 전에 참조가 불가능하다.

 

  정리

var, let, const 모두 호이스팅이 된다. 그러나 let, const는 선언과 초기화가 각각 진행되어 TDZ에 머물러 있어 선언이 되어 있어도 초기화 후 사용이 가능하다.