매일메일 "자바스크립트 호이스팅에 대해서 설명해주세요."

이수용·2025년 4월 8일

매일메일

목록 보기
13/31
post-thumbnail

😎 호이스팅?

호이스팅은 자바스크립트가 코드를 실행하기 전에 변수와 함수 선언이 코드의 최상단으로 끌어올리는 것처럼 동작하는 특징을 의미한다.

호이스팅은 값 할당까지 끌어올리지는❌

var로 선언된 변수는 선언과 초기화는 끌어올리지만 값 할당은 끌어올려지지 않기 때문에 값 할당이 이뤄지기 전까지는 undefined로 평가된다.

console.log(myVar); // undefined

var myVar = 10;
console.log(myVar); // 10

함수 선언식은 함수 자체가 호이스팅✔️

따라서 함수 호출을 선언 이전에 해도 문제가 없다.

console.log(myFunction()); // 'Hello World' 출력

function myFunction() {
  return 'Hello World';
}

But! let과 const는 선언문 이전에 접근하려고 하면 에러가 발생한다!
🤔 왜 발생할까?
Temporal Dead Zone(TDZ)이라는 개념 때문이다.

🙄 TDZ란?

변수가 선언되었지만 초기화되기 전까지의 구간을 말한다.
let과 const로 선언된 변수에는 TDZ가 존재하고 이때 변수에 접근하게 되면 ReferenceError가 발생한다.
TDZ는 코드에서 변수가 선언된 시점부터 초기화될 때까지의 구간에서 변수를 사용하지 못하게 막아주는 역할을 한다.

console.log(myLet); // ReferenceError 발생

let myLet = 10;

✅ 결론

호이스팅은 변수와 함수 선언을 코드 상단으로 끌어올리는 것처럼 동작하는 특징!
var은 초기화 전에 접근하면 undefined, let과 const는 TDZ로 인해 초기화 전에 접근하면 ReferenceError!

0개의 댓글