기존에 사용되던 Var키워드는 문제가 많았기때문에, 등장하게된 let, const
var의 특징 👇
var <-> let, const 👇
let <-> const 차이점 👇
Var(ES5) <-> let, const(ES6) 정리 with. 호이스팅
호이스팅:
변수선언시, 속해 있는 스코프의 최상단에 선언된 것처럼 작동하는 것.var로 선언
👆 undefined 출력
let으로 선언
👆참조 에러 발생
const로 선언
👆참조 에러 발생
호이스팅 / TDZ
Var로 ‘선언’한 변수는, 호이스팅 되면서 undefined로 ‘초기화’ 된다.
때문에, 선언코드 이전에 변수를 사용해도(변수에 접근해도) undefined가 출력 될 뿐, 오류가 발생하지 않는다.
let과 const는 호이스팅 되지 않는 것인가? => NO
let, const도 호이스팅 된다.
하지만 변수가 선언되어, 초기화 되기 전까지는 TDZ(Temporal Dead Zone)영역에 속하게 된다. 이 영역에 있을 때는 변수를 사용할 수 없다.(참조 에러 발생)
[출처: MDN]
*TDZ(Temporal Dead Zone) :
=일시적 사각지대는 [선언 단계]와 [초기화 단계] 사이에서 변수에 접근(참조)하는 것을 의미한다.
⭐TDZ이 선언단계와 초기화 단계 사이를 의미하는데,
var키워드는 변수선언과 초기화(undefined)를 동시에 진행하기때문에,
var로 선언된 변수는 TDZ의 영향을 받지 않는다.
✔TDZ은 작성자가 코드를 예측 할 수 있도록 만들어주고,
잠재적 버그를 줄일 수 있게 해준다.
⭐⭐⭐⭐⭐
-
var로 선언된 변수 = > 실행단계에서 실행컨텍스트에 등록되고 초기화 !
-
let과 const로 선언된 변수 => 실행단계에서 실행컨텍스트에 등록만 !
엔진이 코드를 읽어내려가다가[런타임], 초기화,할당 부분을 만나면 그때 초기화 -> 할당 값이 들어감.
(실행 컨텍스트관련 부분은 몇번을 봐도 헷갈리는 듯..)
thomasKim