본문 바로가기
FrontEnd/Java Script

[Hoisting] let, const로 선언한 변수도 호이스팅이 될까?

by Fathory 2024. 8. 29.


결론부터 말하자면 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보다 안전한 변수를 제공하는 이유 중 하나입니다.

반응형