[JavaScript] 호이스팅 Hoisting과 TDZ

자바스크립트의 개념을 공부하다 보면 필수적으로 마주치게 되는 호이스팅에 대해 따로 정리해 본다.

 

호이스팅 Hoisting

자바스크립트에서 변수 선언이나 함수 선언이 해당 스코프의 최상단으로 올려지는 현상을 말한다.

 

변수의 호이스팅

먼저 변수에서의 호이스팅을 알아보자.

var로 선언한 변수

console.log(hi); // undefined
var hi = 'hello';

위와 같은 코드가 있을 때, undefined가 출력되는 것을 확인할 수 있다.
그 이유가 바로 호이스팅 때문인데, 변수 hi의 선언문이 먼저 최상단으로 올라가 버려 선언되었지만 아직 'hello'라는 할당을 받기 전인 상태이다.

var 키워드로 선언된 변수의 경우 선언과 동시에 undefined로 할당된다는 특징이 있다.

 

 

let 또는 const로 선언한 변수

console.log(kiwi); // Uncaught ReferenceError: kiwi is not defined

let kiwi = 'kiwi'; // 선언과 할당
console.log(kiwi); // kiwi

이번엔 es6에 추가된 let, const로 선언한 변수를 보자. let 키워드로 선언된 변수를 예시로 넣었다.
let, const 키워드는 var 키워드와 달리 변수의 선언 단계와 초기화(할당) 단계가 나뉘어서 진행된다.

 

첫 번째 출력에서 변수가 아직 초기화되지 않았기 때문에 참조에러가 발생하는 것을 볼 수 있다.
변수 kiwi가 초기화되기 전까지, 참조에러가 발생하는 이 구간을 TDZ(Temporal Dead Zone). 일시적 사각지대라고 한다.
이 구간에서 발생하는 에러 덕분에 다양한 문제를 사전에 방지할 수 있다.

 

 

함수의 호이스팅

함수의 호이스팅 역시 변수의 호이스팅과 비슷하게 함수선언이 스코프의 최상단으로 옮겨지는 현상이다.

 

함수 선언문

foo();

function foo(){
    console.log('hi');
}

위 코드는 정상적으로 'hi'라는 값을 출력한다.
함수 foo()가 호출된 후에 선언되는 흐름이지만, 호이스팅이 발생해서 이미 최상단에 foo()가 선언되었기 때문이다.

함수 선언문으로 선언된 함수의 경우 함수 전체를 호이스팅 하기 때문에 선언 전에 호출이 가능하다.

 

 

함수 표현식

함수 표현식의 경우는 변수에 함수를 할당하는 식으로 함수를 정의하기 때문에 변수의 호이스팅처럼 선언과 할당이 나누어져 있다.

banana(); // TypeError: banana is not a function

const banana = function(){
    console.log('b');
}

위와 같은 코드가 있을 때 TypeError: banana is not a function 이런 에러가 발생한다.
함수 표현식은 선언부만 호이스팅이 되었기 때문에 실행 흐름이 할당문에 도달했을 때 사용할 수 있어 타입 에러가 발생하는 것이다.

 

 

TDZ(Temporal Dead Zone)

위에서 언급한 TDZ는 변수가 선언되기 전에 참조하려 했을 때 발생하는 에러를 말한다.
TDZ는 let, const로 선언된 변수에서만 발생한다.
이 키워드들은 블록 스코프를 갖고, TDZ 역시 변수가 선언된 블록 범위 안에서만 존재하기 때문이다.

let, const 변수 역시 호이스팅이 발생하지만 TDZ 때문에 발생하지 않는 것처럼 보인다.

 

 

출처

https://ko.javascript.info/function-expressions#ref-377

https://ko.javascript.info/var