자바스크립트 호이스팅이란? TDZ Temporal Dead Zone

호이스팅이란 인터프리터가 변수와 함수의 메모리 공간을 선언전에 미리 할당을 하는것을 뜻한다.

 

쉽게 표현하면 스코프 내부 어디서든 변수선언은 최상위에 선언된것처럼 보여진다.

 

여기서 말하는 스코프란 변수에 접근할수 있는 범위를 뜻한다.

 

즉 전역 스코프에 선언된 변수는 전역에서 접근이 가능하고 , 지역 스코프에 선언된 변수는 해당 지역 스코프내에서 접근이 가능하다.

 

다시 호이스팅에 대해 알아보자면,

 

호이스팅을 확인 할 수 있는 부분은 var 변수와 , 함수 선언문이 있다.

 

var 변수부터 알아보면

console.log(variable); // undefined

var variable = 'hello world';

 

variable이라는 변수가 선언되고 "hello world" 라는 스트링으로 할당 되기전에 콘솔로그를 찍었는데 undefined가 출력된다.

 

즉 variable이라는 변수는 호이스팅에 의해 선언이 최상단 위로 선언된것이다.

 

즉

 

var variable;

console.log(variable) // undefined

variable = 'hello world'

이렇게 작동했다고 보면된다.

 

 

 

함수 선언문에서도 호이스팅을 확인 할 수 있다.

 

func(); // hello world


function func(){
  console.log('hello world');
}

 

분명 함수 호출이 함수선언보다 상단에 위치해도 해당 코드는 잘 작동을한다.

이유는 함수선언문에 호이스팅이 작동하여 최상단에 선언된것이다.

 

이것을 호이스팅이라고 한다.

 

 

그럼 let 과 const 는 호이스팅이 일어나지 않는것인가 ??

 

아니다. let과 const도 호이스팅이 일어난다.

 

하지만 let과 const 는 var과 변수 선언 , 초기화 단계가 다르기 때문이다.

 

 

 

var은 선언 및 초기화 단계가 동시에 일어나고 그다음 할당단계가 일어난다.(함수스코프)

즉 선언 및 초기화(undefined) 단계가 동시에 일어나기 때문에 호이스팅이 발생해 위에서 확인한것처럼 undefined를 출력 할 수 있는것이다.

 

 

let은 선언단계 , 초기화단계 , 할당 단계가 일어난다.(블록스코프)

선언 단계 , 초기화단계가 동시에 일어나는 var 변수와는 달리 let은 선언단계 초기화 단계 할당단계가 나뉘어져 있어 선언이 되어 호이스팅 되더라도 초기화 단계는 실제 코드에 도달했을때 되기때문에 참조에러가 발생한다.

 

const 는 선언 초기화 할당 단계가 동시에 일어나야한다.(블록스코프)

 

let과 const는 var 변수와 다르게 TDZ (Temporal Dead Zone) 이라는 것이 존재한다.

 

TDZ란 할당을 하기전 사용할수없는 사각지대의 영역이라고 보면된다.

 

즉

 

console.log(hello);
console.log(world);

let hello = 'hello world';
const world = 'hellow world';

 

let과 const가 할당 되기전 상단에 위치한 console.log들은 TDZ에 위치한다고 보면된다.

 

즉 호이스팅이 일어나더라도 TDZ가 방지를 하고 있다고 생각을 하면된다.

 

이때문에 let과 const는 호이스팅이 안일어난다고 생각하는 사람이 많은데,

전혀 그렇지 않다 호이스팅을 방지하고 있을뿐

 

 

 

 

 

태클은 언제나 환영합니다. 잘못된 부분이 있으면 바로잡아주세요 :)