결론부터 말하자면 let과 const 키워드로 선언된 변수도 호이스팅(hoisting)이 됩니다. 그러나 var와는 다른 방식으로 동작합니다.
호이스팅이란?
호이스팅이란, JavaScript의 기본 동작 방식 중 하나로, 변수와 함수 선언이 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 것을 말합니다. 이로 인해, 코드에서 변수를 선언하기 전에 해당 변수를 참조할 수 있습니다.
let과 const의 호이스팅
- 호이스팅 방식: let과 const로 선언된 변수는 호이스팅이 되지만, **"Temporal Dead Zone (TDZ)"**이라고 불리는 구간이 있어, 실제로 변수가 선언되기 전까지는 접근할 수 없습니다.
- TDZ (Temporal Dead Zone): 코드 블록 내에서 let 또는 const로 선언된 변수가 선언된 위치부터 초기화되기 전까지의 구간을 말합니다. 이 구간에서는 해당 변수에 접근하려고 하면 ReferenceError가 발생합니다.
예시
console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 10;
위 코드에서, a는 let으로 선언되었기 때문에, 선언이 실행되기 전에 a를 참조하면 오류가 발생합니다.
console.log(b); // undefined
var b = 20;
반면, var로 선언된 변수는 호이스팅될 때, 선언뿐만 아니라 **초기화(undefined로)**도 함께 진행됩니다. 따라서, b는 undefined로 초기화되어 참조할 수 있습니다.
요약
- let과 const는 호이스팅되지만, 초기화되지 않은 상태로 호이스팅됩니다.
- Temporal Dead Zone (TDZ) 때문에, 선언하기 전에 해당 변수에 접근하려고 하면 ReferenceError가 발생합니다.
- var는 선언과 동시에 undefined로 초기화되기 때문에, 선언 전에 변수를 참조할 수 있습니다.
이 차이점은 let과 const가 var보다 안전한 변수를 제공하는 이유 중 하나입니다.
반응형
'FrontEnd > Java Script' 카테고리의 다른 글
[REGEX] 저장했던거 설명해드릴게요 자바스크립트 정규식 (5) | 2024.09.06 |
---|---|
[REGEX] 저장해두고 사용하세요 자바스크립트 정규식 (0) | 2024.09.06 |
[this] 5년만에 다시보는 자바스크립트의 this (0) | 2024.08.28 |
ty vs got: 어떤 라이브러리를 선택할까? (0) | 2024.08.12 |
# Worklet (0) | 2023.07.15 |