호이스팅 과 TDZ

호이스팅에 대해 이야기 하기전에 먼저 변수에  대해 말해보겠습니다. 

변수에는 let, const, var 가 있습니다. (사실 const 는 상수이지만 변수라고 묶어서 표현하겠습니다.)

 

let 과 const 는 ES6 부터 생긴 문법입니다. 

그런데 굳이 var 가 있는데  왜 let 과 const 를 만들었을까요? 

 

var 와 let 은 크게 다르지 않습니다. 

대부분의 경우에는 둘을 바꿔서 사용해도 문제되지 않습니다. 

그럼에도 불구하고 굳이 let을 쓰라는 이유가 뭘까요? 

 

 

var 는 한번 선언된 변수를 다시 선언할 수 있습니다. 

 var name = "Kim";
 console.log(name);
 
 var name = "Park";
 console.log(name);

 

반대로 let은 한번 선언된 변수를 다시 선언할 수 없습니다. 

let name = "Kim";
console.log(name);

let name = "Park";
console.log(name);  / error!!

 

이러한 결과가 나오는것은 var는 선언하기 전에 사용할 수 있습니다. 

console.log(name); // undefined

var name = "Kim";

name을 콘솔 아래로 적었는데도 에러가 나지 않고 언디파인드를 뱉어냈습니다. 

왜냐면 var로 선언한 모든 변수는 코드가 실제로 이동하지 는 않지만  최상위로 끌어올려진 것 처럼 동작합니다. 

 

var name; // hoisting

console.log(name); // undefined

name = "Kim"

이것을 호이스팅이라고 합니다. 

호이스팅은 스코프 내부 어디서든 변수 선언이 최상위에 선언된 것처럼 행동하는 것입니다. 

 

잠깐! 스코프는 뭘까요 ?

Scope 는 우리말로 번역하면 '범위' 라는 뜻을 가지고 있습니다. 즉, 스코프란 '변수의 접근할 수 있는 범위' 라고 할수 있습니다. 

자바스크립트에서 스코프는 2가지 타입이 있습니다. 바로 global(전역) 과 local(지역)인데요, 

전역스코프는 말그대로 전역에 선언되어있어 어디든지 해당 변수에 접근할 수 있다는 것이고, 

지역 스코프는 해당 지역에서만 접근 할 수 있다는 의미 입니다. 

 

자바스크립트에서 함수를 선언하면 새로운 스코프를 생성합니다. 

그러므로 함수 몸체에 선언한 변수는 해당 함수 에서만 접근할 수 있습니다.

이걸 함수 스코프(function-scoped) 라고 하는데,  이것이 지역 스코프의 예라고 할 수 있습니다. 

 

함수 스코프 말고도 블록 스코프 란것도 있는데요 . 블록이란 중괄호 "{ }" 로 둘러싸인 부분을 블록이라고 합니다.  

 

 

다시 돌아와서,

 

호이스팅이 이루어질때  선언은 최상위로 끌어올리지만 할당은 끌어올리지 않습니다. 그렇기 때문에 undefined를 뱉어냅니다. 

name이라는 선언은 호이스팅 되고 값은 그대로 있는 것입니다. 

 

 

 

그렇다면 let 과 const 는 호이스팅 되지 않는것일까요?

아닙니다. 이 둘도 호이스팅이 됩니다.  그러나 Temporal Death Zone (TDZ) 와  스코프에서 차이가 있습니다. 

 

let 과 const 는 TDZ의 영향을 받습니다.

Temporal Death Zone (TDZ) 를 예를 들어서 설명하자면

a가 호이스팅 됬지만 a 선언문이 나오기 전까지는 a 에 접근할 수 없다 라는 존을 만듭니다. 

이것은 코드를 예측가능하게 하고 잠재적인 버그를 줄일 수 있습니다. 

 

 

 

여기서 var는 함수스코프 

var는 함수만 지역변수로 호이스팅이 되고 나머지는 다 전역변수로 올려버립니다. 

 

let 과 const 는 블록스코프 

블록스코프는 위에서 말한것 처럼 중괄호에서 둘러쌓인 부분이 스코프 입니다.