변수의 선언과 호이스팅

자바스크립트에서 var을 쓰지말아야 하는 이유는?

var은 함수 레벨 스코프를 지원하므로 의도치않게 전역적으로 선언 될 수 있으므로 let이나 const를 사용한다.
let과 const는 ECMA2015(ES6)부터 추가된 스펙으로 블록스코프를 지원한다.

let score; // 변수 선언. let score = undefiend;와 같다
score = 100; // 값의 할당

const test; // Err Missing initializer in const declaration
const test = 'test'; // 상수 선언은 값의 할당과 같이써야한다.

1. score을 가리키는 메모리 공간에 undefiend가 할당되고
2. 값을 할당하면 다른 메모리 공간에 100이 할당되고 이 주소를 가리킨다.
** (undefiend를 지우고 100을 할당하는것이 아니라 다른 메모리 공간에 재할당하는것이다.)

 

호이스팅

모든 선언문은 위로 끌어올려지며 runtime시점 이전에서 실행된다. 변수에서는 선언부만 호이스팅된다.

console.log(rumi); // 뭐가 찍힐까?
var rumi;
rumi = 'rumi is my name';

console에는 뭐가 찍힐까 ?
undefiend가 찍힌다. 이 코드는 아래와 같다. 변수 선언부가 호이스팅 된것이다.

var rumi; // var rumi = undefiend;
console.log(rumi); 
rumi = 'rumi is my name';

 

그럼 let은 어떨까?

console.log(ray); // 뭐가 찍힐까?
let ray;
ray = 'ray is nice guy';

console에는 뭐가 찍힐까 ?
Uncaught ReferenceError: ray is not defined at..

참조에러가 뜬다. const 도 마찬가지다. 
그럼 let과 const는 호이스팅이 안되는걸까 ? 아니다

 

TDZ (Temporal Dead Zone)

직역하자면.. 일시적 사각지대 .. 일시적인 무응답구간 정도로 해석된다.
let, const 변수는 TDZ의 영향을 받는다.

변수가 완전히 초기화되기 전에 접근하려하면 참조에러(ReferenceError)가 발생한다. 
스코프 내에서 변수가 선언된 실제 위치에 도달할 때까지 TDZ를 벗어날 수 없다.

let은 선언부와 초기화 사이에 TDZ가 생성되며, const는 선언과 초기화가 동시에 진행되지만, 선언 이전에 TDZ가 생성된다.
var, let, const, func..모두 호이스팅 되지만 let과 const는 TDZ라는 특수구간이 생성되어 해당값을 참조할수없는것이다.

 

 

참고
https://noah0316.github.io/JavaScript/2020-11-04-temporal-dead-zone,-hoisting%EC%97%90-%EA%B4%80%ED%95%98%EC%97%AC/

https://medium.com/korbit-engineering/let%EA%B3%BC-const%EB%8A%94-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85-%EB%90%A0%EA%B9%8C-72fcf2fac365