Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- javascript opreator
- css display
- 자바스크립트 반복문
- front-end
- 자바스크립트 scope
- html 코드
- 자바스크립트 async await
- html 주석
- 자바스크립트 상속
- 자바스크립트 클로저
- 티스토리챌린지
- 자바스크립트 실행 컨텍스트
- javascript
- 자바스크립트 클래스
- 자바스크립트 생성자 함수
- css 포지션
- 자바스크립트 프로미스
- 오블완
- 자바스크립트 promise
- HTML
- CSS
- javascript opreators
- 웹 개발 트렌드
- css position
- 프론트엔드
- javascript closure
- 자바스크립트 스코프
- css3
- 자바스크립트 연산자
- 자바스크립트
Archives
- Today
- Total
Multi Developer SuHo
[ 자바스크립트 유용한 정보] TDZ(Temporal Dead Zone)란? 본문
SMALL
안녕하세요~ 이번엔 간단한 자바스크립트에서 TDZ(Temporal Dead Zone) 에 대해 알아보겠습니다. TDZ가 무엇이고 간단한 코드들에 대한 예시를 들면서 설명해보겠습니다~
목차
1. TDZ(Temporal Dead Zone)
1-1. TDZ란?
1-2. TDZ 특징
1-3. TDZ 발생 코드
서론
먼저 TDZ(Temporal Dead Zone)에서 Dead Zone? 만 보시면 이상현상이 발생하는 영역으로 해석할 수 있습니다. 그럼 TDZ가 무엇인지, 왜 발생하는지 간단한 코드를 통해 이해하는 시간을 가져보겠습니다.
본론
1. TDZ(Temporal Dead Zone)
1-1. TDZ(Temporal Dead Zone)이란?
선언하고 초기화 이전에 식별자를 참조할 수 없는 영역을 개발자가 만든 것.
1-2. TDZ 특징 2가지
1.선언 전에 접근하면 참조할수 없는 영역으로 ReferenceError 발생한다.
2.TDZ는 코드 실행 흐름을 따라 변화
1-3. TDZ 발생 코드
주석으로 설명을 대체합니다.
function foo() {
// 전역 컨텍스트 생성
// foo 함수의 실행 컨텍스트 생성
let a = 1; // foo 실행 컨텍스트에 레코드의 기록
function foo2() {
// foo2 함수의 실행 컨텍스트 생성
console.log(b); // b 변수를 찾으나 foo2의 스코프에 없으므로 ReferenceError 발생 console.log(b) 에서 b가 TDZ 영역에 있음음
console.log(foo3()); // foo3 함수 호출
}
foo2(); // foo2 함수 호출
let b = 2; // b 변수에 2 할당 (foo 함수의 변수 객체에 저장)
// foo2 함수 호출 시점에는 b가 undefined 상태였으므로 ReferenceError 발생
}
function foo3() {
// foo3 함수의 실행 컨텍스트 생성
return 4;
}
foo(); // foo 함수 호출, foo 함수의 실행 컨텍스트 생성
결론
TDZ(Temporal Dead Zone)은 let과 const로 선언된 변수가 초기화되기 전까지 접근할 수 없는 구간으로, 이때 변수를 참조하면 ReferenceError가 발생한다. 이를 방지하기 위해 변수를 사용하기 전에 반드시 선언하고 초기화하는 습관을 가지셔야 합니다.
이상입니다. TDZ 에 대한 내용을 마무리하겠습니다. 감사합니다.

LIST
'자바스크립트 기록' 카테고리의 다른 글
자바스크립트 class, 메서드 축약형, ES6 화살표 함수, this bind 🔎 (0) | 2025.01.15 |
---|---|
[자바스크립트 함수 ] 재귀 함수, 생성자 함수 , this 키워드 (0) | 2025.01.14 |
[자바스크립트] 실행 컨텍스트 (Excution Context) 🗒 (0) | 2025.01.13 |
[자바스크립트 함수] 자바스크립트 함수란(function)? (0) | 2025.01.13 |
[자바스크립트 문법] 자바스크립트 배열(Array) ,push( ), length( ), splice( ) 메서드 (2) | 2025.01.13 |