(Javascript) hoisting(호이스팅)이란? 발생 배경, 종류, TDZ

 

호이스팅의 발생 배경

 

자바스크립트는 인터프리터 언어이다. 

 

컨파일러로 한 번에 기계어로 변환하는 컴파일 언어와 달리 한 줄씩 코드를 읽고 실행한다는 것이다.

 

하지만 자바스크립트가 인터프리터 언어라고 해서 아무 준비없이 코드를 바로 실행하는 건 아니다.

 

컴파일 언어가 컴파일 과정을 거치듯 인터프리터 언어도 인터프리테이션 단계를 거친다.

 

이 인터프리테이션 과정 중, 변수나 함수 선언을 찾아 메모리에 할당하는 과정이 있는데

 

이를 변수 & 함수 바인딩이라고 한다.

 

 

 

이렇게 코드가 실행되기 전에 변수나 함수 선언을 미리 할당하는 과정이 있기에 

 

실제로 변수나 함수 선언이 되기 이전에 그 변수나 함수에 접근이 가능한데,

 

이때 변수와 함수 선언이 코드 가장 위로 끌어올려지는 것 같이 느껴지는 현상을 호이스팅(hoisting)이라고 한다.

 

 

 

호이스팅의 종류

호이스팅은 크게 두가지 종류로 나뉜다. 바로 변수 호이스팅과 함수 호이스팅이다.

 

변수와 함수 호이스팅은 선언이 코드 실행 전에 가장 위로 끌어올려진다는 것에서는 둘이 동일하다.

 

차이점은 호이스팅 발생 후, 할당되는 것이다.

 

변수 호이스팅 발생시 변수에 undefined가 할당되고.

 

함수 호이스팅 발생시 함수 객체가 할당된다.

 

이때 함수 선언문으로 선언한 함수에 함수 호이스팅이 발생하고,

 

함수 표현식으로 선언한 함수에는 변수 호이스팅이 발생하기에 주의해야 한다.

 

//변수 호이스팅//
console.log(a) //undefined
const a = 2;

 

//함수 호이스팅//
console.log(typeof add); //함수 선언문, 결과 : function
console.dir(typeof sub); //함수 표현식, 결과 : undefined

console.log(add(5, 3)); //함수 선언문, 결과 : 2
console.log(sub(5, 3)); //함수 표현식, 결과 : type error

//함수 선언문
function add(x, y){
	return x+y;
}

//함수 표현식
var sub = function(x,y){
	return x-y;
}

 

 

 

var,  let, const의 차이와 TDZ

var과 let, const 모두 호이스팅이 발생한다는 점에서 동일하다.

 

다만 var과 달리 let과 const는 선언 이후의 블록 단위 범위에서 유효하다는 것이 var과 다른 점이다.

 

즉  let과 const는 호이스팅이 일어나지만 TDZ(Temporal Dead Zone)이 적용된다.

 

 

 

TDZ는 코드 시작부터 해당 변수 또는 함수가 할당될 때까지 존재한다. 

 

즉 해당 함수나 변수가 선언되고 할당되기 이전까지 그 변수나 함수의 사용을 막는 것이다. 

 

TDZ 범위 안에서 아직 할당되지 않은 변수에 접근하려고 하면, reference error가 발생한다.

 

호이스팅으로 인해 실제로 존재하지만 유효한 범위가 아니기에 접근을 막아 둔 것이다.

 

이런 TDZ가 있으면 아직 할당되지 않은 변수를 사용하는 실수를 막을 수 있다.

 

따라서 var보다는 let과 const를 사용하는 것이 바람직하다.