[Javascript]9. 호이스팅의 개념과 TDZ

목차

1. 호이 스팅이란?
2. var, const, let의 호이 스팅과 TDZ

1. 호이 스팅이란?

호이 스팅의 간단한 개념부터 설명하자면, 호이 스팅이란 함수의 선언부가 유효 범위의 최상단으로 끌어올려지는 현상이다. [Javascript]6. 함수 선언과 호출 강의에서 우리는 함수의 두 가지 선언 방식에 대해 배웠다. 하나는 선언식이고 다른 하나는 표현식이다. 아직 두 가지 선언식을 모른다면 [Javascript]6. 함수 선언과 호출 강의를 듣고 오길 바란다. 다시 본론으로 돌아가서, 호이 스팅은 함수의 선언부가 유효 범위의 최상단으로 끌어올려지는 현상이라고 했다. 원래 자바스크립트의 코드는 위에서 아래로 읽힌다. 따라서 함수의 호출이 선언 부보다 앞에 있다면 아래 예와 같이 에러가 나는 것이 당연하다. ong 함수를 호출한 상태에서는 아직 ong함수 선언이 안되었기 때문이다. 두 번째 예시에서는 함수 표현식이 아닌 함수 선언식을 사용하여 함수를 선언하였다. 이때 에러가 나지 않는 이유는 호이 스팅이 발생했기 때문이다. 선언부가 상단으로 끌어올려져 에러가 안나는 것이다.

2. var, const, let의 호이 스팅과 TDZ

호이 스팅은 변수의 선언부와 초기화하는 부분을 분리하여 변수의 선언부를 최상단으로 끌어올린다. 따라서 변수의 초기화 부분은 호이 스팅이 되지 않는다. 아래 예제를 보면 이해가 쉽게 될 것이다. 변수의 선언 부인 var ong는 최상단으로 끌어올려졌지만, ong = 1 부분은 초기화 부분으로 호이 스팅 되지 않는다. 

console.log(ong)
var ong = 1 // -> var ong, ong = 1 으로 분리

또한 선언 방식에 따라서도 차이가 있다. 변수의 선언 방식에는 var, const, let이 있다. var는 아까 말했듯 초기화 부분은 호이스팅되지 않기 때문에 아래 예제의 경우에는 undefined를 출력한다. 반면에, const와 let은 아래 예제의 경우에 Uncaught ReferenceError: ong is not defined를 출력한다. var 선언 방식과 const/let 선언 방식에 차이가 있는 이유는 var 선언 방식의 경우에는 선언과 초기화가 동시에 이루어지지만 const와 let방식은 선언과 초기화가 나누어져 이루어진다. 이때 선언과 초기화 사이를 TDZ(Temporal dead zone)이라 한다. 만약 해당 코드가 나오기 이전에 사용을 하려고 시도하면 TDZ에서 ReferenceError를 출력한다. 아래 예제에서는 let과 const의 변수 초기화가 이루어지기 이전에 사용을 하려 해서 TDZ에서 ReferenceError을 출력한 것이다.

//ex) var
console.log(ong)
var ong = 1

//ex) const
console.log(ong)
const ong = 1

//ex) let
console.log(ong)
let ong = 1