F-Lab
🚀
취업/이직이 고민이신가요? 합격에 필요한 모든 것을 도와드립니다.

자바스크립트의 호이스팅과 TDZ(Temporal Dead Zone) 이해하기

writer_thumbnail

F-Lab : 상위 1% 개발자들의 멘토링

AI가 제공하는 얕고 넓은 지식을 위한 짤막한 글입니다!



자바스크립트의 변수 선언과 호이스팅

자바스크립트에서 변수 선언은 크게 var, let, const로 나뉩니다. 이들 간의 차이를 이해하는 것은 자바스크립트의 동작 원리를 이해하는 데 매우 중요합니다.

var는 함수 스코프를 가지며, 선언과 동시에 초기화가 이루어집니다. 반면 letconst는 블록 스코프를 가지며, 선언과 초기화가 분리되어 이루어집니다.

왜냐하면 var는 선언과 초기화가 동시에 이루어지기 때문에, 선언 전에 접근해도 undefined 값을 반환하기 때문입니다. 반면 letconst는 TDZ(Temporal Dead Zone)에 의해 선언 전에 접근 시 에러가 발생하기 때문입니다.

이러한 차이는 코드의 가독성과 디버깅에 큰 영향을 미칩니다. 특히, letconst는 TDZ를 통해 의도치 않은 변수 접근을 방지할 수 있습니다.

따라서, 변수 선언 시 letconst를 사용하는 것이 권장됩니다.



호이스팅의 동작 원리

호이스팅은 자바스크립트 엔진이 변수 선언을 코드의 최상단으로 끌어올리는 동작을 의미합니다. 이는 함수 선언에도 동일하게 적용됩니다.

예를 들어, 아래 코드를 살펴보겠습니다:

console.log(a); // undefined
var a = 10;

위 코드에서 var a는 선언이 호이스팅되어 undefined로 초기화됩니다. 그러나 letconst는 TDZ에 의해 선언 전에 접근 시 에러가 발생합니다.

왜냐하면 letconst는 선언과 초기화가 분리되어 이루어지며, 초기화가 이루어지기 전까지는 TDZ에 머물기 때문입니다.

따라서, 호이스팅을 이해하고 이를 고려한 코드를 작성하는 것이 중요합니다.

호이스팅은 코드의 실행 순서를 이해하는 데 중요한 개념으로, 특히 디버깅 시 큰 도움이 됩니다.



TDZ(Temporal Dead Zone)의 역할

TDZ는 letconst가 선언되기 전에 접근을 방지하는 메커니즘입니다. 이는 코드의 안정성과 예측 가능성을 높이는 데 기여합니다.

예를 들어, 아래 코드를 살펴보겠습니다:

console.log(b); // ReferenceError
let b = 20;

위 코드에서 b는 선언 전에 접근하려고 시도했기 때문에 ReferenceError가 발생합니다.

왜냐하면 TDZ는 선언과 초기화가 완료되기 전까지 변수에 접근할 수 없도록 제한하기 때문입니다.

TDZ는 코드의 의도를 명확히 하고, 의도치 않은 변수 접근을 방지하는 데 중요한 역할을 합니다.

따라서, TDZ를 이해하고 이를 고려한 코드를 작성하는 것이 중요합니다.



호이스팅과 TDZ의 실제 활용

호이스팅과 TDZ는 자바스크립트의 동작 원리를 이해하는 데 중요한 개념입니다. 이를 실제 코드에 적용하면 코드의 안정성과 가독성을 높일 수 있습니다.

예를 들어, 아래 코드를 살펴보겠습니다:

function example() {
    console.log(x); // undefined
    var x = 10;

    console.log(y); // ReferenceError
    let y = 20;
}

위 코드에서 var는 호이스팅되어 undefined로 초기화되지만, let은 TDZ에 의해 에러가 발생합니다.

왜냐하면 let은 선언과 초기화가 분리되어 이루어지며, 초기화가 이루어지기 전까지는 TDZ에 머물기 때문입니다.

따라서, 변수 선언 시 letconst를 사용하는 것이 권장됩니다.

호이스팅과 TDZ를 이해하고 이를 고려한 코드를 작성하면, 코드의 안정성과 가독성을 높일 수 있습니다.



결론: 호이스팅과 TDZ의 중요성

호이스팅과 TDZ는 자바스크립트의 동작 원리를 이해하는 데 중요한 개념입니다. 이를 이해하면 코드의 안정성과 가독성을 높일 수 있습니다.

호이스팅은 변수 선언을 코드의 최상단으로 끌어올리는 동작을 의미하며, TDZ는 letconst가 선언되기 전에 접근을 방지하는 메커니즘입니다.

왜냐하면 호이스팅과 TDZ는 코드의 실행 순서를 이해하는 데 중요한 개념으로, 특히 디버깅 시 큰 도움이 되기 때문입니다.

따라서, 호이스팅과 TDZ를 이해하고 이를 고려한 코드를 작성하는 것이 중요합니다.

호이스팅과 TDZ를 이해하고 이를 실제 코드에 적용하면, 코드의 안정성과 가독성을 높일 수 있습니다.

ⓒ F-Lab & Company

이 컨텐츠는 F-Lab의 고유 자산으로 상업적인 목적의 복사 및 배포를 금합니다.

조회수
logo
copyright © F-Lab & Company 2026