Javascript

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

살다보니개발자 2022. 9. 7. 22:10

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

 

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

 

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

 

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

 

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

 

호이스팅을 확인 할 수 있는 부분은 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는 호이스팅이 안일어난다고 생각하는 사람이 많은데,

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

 

 

 

 

 

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

'Javascript' 카테고리의 다른 글

자바스크립트 콜백함수란? (Callback Function)  (0) 2022.09.14
자바스크립트 클로저란?  (0) 2022.09.10