Javascript temporal dead zone ( TDZ ) const 와 let 호이스팅

회사에서 프로젝트 준비를 하면서 Js 의 프레임워크 라이브러리 등등 너무 많은것들을 머리에 쑤셔넣다보니 자바스크립트 동작에 대해 다시한번 정리가 필요하단 생각이 들었다.

바쁘다면 가장 아래로 스크롤 해서 결론부터 보자.

 

TDZ 일시적인 사각지대 란 뜻으로 스코프 시작 지점부터 초기화 시작 지점까지 구간을 말한다.

뭔말인지 잘 모르겠다.

 

const 와 let이 등장하면서 부터 사실 var 나 functuon() 는 잘 사용하지 않았다.

 

var 나 function(){} 의 경우 재선언이 가능하다는 단점도 있고 ( 코드 길어져서 변수이름 똑같게 쓰면... )

// 다른코드
// 다른코드
// 다른코드
// 다른코드
// 다른코드
// 다른코드

var 변수 = "변수";

console.log(변수);

이런식으로 쓰면 실제 실행은

var 변수
// 다른코드
변수 = "변수";

console.log(변수);

뭐 이딴식으로 되는 경우 등이 머리를 복잡하기 때문도 있다.

( function(){} 의 경우 할당까지 다 올라가서 오히려 선호하는 사람이 많은듯 )

 

근데 사실은 const 와 let 도 호이스팅이 일어난다는 점.

 

javascript에서의 변수는 사실 선언단계와 초기화단계 할당단계 3단계를 거친 후 생성이 된다.

 

그런데 var const let 에서 이 3가지 단계의 차이점이 존재할 뿐이다.

 

var 의 경우 선언과 초기화가 동시에 일어난다 ( 이 때 실행 컨텍스트 변수 객체의 변수를 등록하고 메모리 값이 undefined 가 된다 ) 

 

그래서 선언 전에 호출을 해도 ReferenceError 가 안나고 undefined 값이 호출된다. 이게 흔히들 말하는 호이스팅

 

근데 let 과 const 도 호이스팅이 된다고?

 

let은 선언과 초기화 단계가 분리되어있다.

 

그래서 선언단게에서 실행 컨텍스트에 변수를 등록 했지만 메모리가 할당이 안되어서 ReferenceError 를 발생시키는 것이다.

 

그래서 흔히들 호이스팅이 안된다 라고 생각한다.

 

자 그럼 다시 위에서 말했던 TDZ 를 보자.

 

TDZ 일시적인 사각지대 란 뜻으로 스코프 시작 지점부터 초기화 시작 지점까지 구간을 말한다.

 

시작부터 초기화 시작 지점 즉 메모리가 할당되지 않은 초기화 직전의 단계

이 구간이 TDZ 이고 이 때문에 const 나 let 이나 호이스팅이 일어나지 않는 것 처럼 보일 뿐이다.

자 근데 좀 햇갈릴 수도 있는데

function 함수( ) {
	console.log(변수);
}

const 변수 = '안녕';
함수();

이거 오류 안난다.

 

왜?

 

그냥 쉽게 말하면 TDZ 가 함수 내부에서 일어나는 일까지 영향을 받지는 않는다.

 

뭐 아는사람은 알겠지만 하나의 js 파일의 가장 최상단 scope 는 anonymous 함수라 생각하면 되는데

 

TDZ는 같은 레벨의 scope 에서만 발생한다 생각하면 더 편하다.

 

근데 사실.. 이거 몰라도 eslint 쓰고.. 그냥 선언 먼저 하고 변수 쓰면 된다..