스코프, 호이스팅, TDZ

 

자바스크립트는 변수나 함수의 선언부분을

변수의 범위 맨 위로 강제로 끌고가서 가장 먼저 해석한다.

그게 Hoisting이다.

​

function 함수(){ 
console.log(이름); 
var 이름 = 'Klopp';
}

이런 함수를 만들었다고 가정할 때

함수를 실행하면

콘솔에 이름이라는 정의되지않은 변수가 먼저 찍혀야하니

에러가 떠야한다. (원래대로라면)

​

하지만 에러대신 undefined가 뜬다

​

그 이유는

function 함수(){ 
var 이름; 
console.log(이름);
이름 = 'Klopp'; }

자바스크립트라는 문법은 호이스팅이 일어나기 때문에

위의 함수처럼 인식을 하고 위에서부터 읽어내려간다.

그럼 var 이름; <= 이 선언부분만 위쪽으로 끌어올려져

할당되지 않은 이름이라는 변수가 먼저 출력되고

그 과정에서 undefined가 뜨게 되는 것이다.

​

​

변수는 전역변수와 지역변수가 있는데

for문이나 if문 그외 모든 함수내에서 사용하고 싶은 변수를 만들 때는

자바스크립트파일이나 html파일 스크립트태그내에서 맨 위에

var 나이 = 20;
let 이름 = '김판호';

이렇게 작성하면 끝이다.

​

하지만 지역변수는

함수(); function 함수() {
let 안녕 = 'Hello!';
console.log(안녕); 
}

이렇게 함수 내에서 선언하고 할당한 변수는

함수 내에서만 사용가능하다!

 

 

 

TDZ에 대해 알아보자

 

 

위의 호이스팅 예시에서는

let과 const는 예로 들지 않았다.

 

function 함수1(){ 
console.log(이름); 
let 이름 = 'Klopp';
}

 

var 변수를 사용했을 땐 변수 선언부분만 위쪽으로 끌어올려져  undefined가 나왔지만

만약 위와 같이 let이나 const를 사용했을경우엔 콘솔창에 찍어보면

 

위와 같은 에러를 보게된다.

 

let과 const 변수 

그리고 class구문은

 

값이 선언되기 전에 호출하거나 사용했을 시

변수에 접근할 수 없다.

 

 

이게 TDZ이다.

(Temporal Dead Zone)

 

let, const, class는

선언되기 전에 호출되는 코드라인을

 TDZ안에 있다. 라고 할 수 있다.

 

 

기존의 자바스크립트 변수는 var만 있었지만

호이스팅 되는 특성때문에 에러가 아닌 undefined를 나오게되고

이로 인해 프로젝트를 디버깅하는데 문제가 생길 수 있다.

 

 

이런 문제를 해결하고

정확한 에러를 띄우기 위해

let과 const 변수가 생겼다고 보면 될 것 같다!