diff --git a/README.md b/README.md index 924a02f7..2b816b0b 100644 --- a/README.md +++ b/README.md @@ -110,6 +110,7 @@ All the translations for this repo will be listed below: 31. [**Design Patterns**](#31-design-patterns) 32. [**Partial Applications, Currying, Compose and Pipe**](#32-partial-applications-currying-compose-and-pipe) 33. [**Clean Code**](#33-clean-code) +34. [**Temporal Dead Zone (TDZ)**](#34-temporal-dead-zone-tdz)
@@ -1278,6 +1279,65 @@ The Event Loop is a critical part of JavaScript's concurrency model, ensuring no **[⬆ Back to Top](#table-of-contents)** +--- + +## 34. Temporal Dead Zone (TDZ) + +

The Temporal Dead Zone (TDZ) describes the period between entering a scope and the point where a let or const declaration is evaluated. During this window the identifier exists but remains uninitialized, so any access attempt throws a ReferenceError. This behavior encourages predictable code by preventing reads before explicit initialization.

+ +

Like var, let and const declarations are hoisted, but unlike var they are not automatically initialized with undefined. The runtime establishes the TDZ for each block-scoped binding, closing it only when the declaration executes. Until then, even typeof cannot safely inspect the variable.

+ +### Code Example + +```javascript +// Using var (no TDZ — initialized with undefined) +console.log(myVar); // undefined +var myVar = "var is hoisted and initialized"; + +// Using let (TDZ throws until declaration runs) +try { + console.log(myLet); +} catch (error) { + console.log(error.message); // Cannot access 'myLet' before initialization +} + +let myLet = "let is block scoped"; +console.log(myLet); // Works after initialization + +// TDZ also applies inside blocks +{ + try { + console.log(blockConst); + } catch (error) { + console.log(error.message); + } + const blockConst = "TDZ ends after this line"; + console.log(blockConst); +} +``` + +

The TDZ also impacts default parameters and destructuring. When a default value references another let/const declared later in scope, the initialization fails because the identifier is still in its TDZ.

+ +### Articles + +- [let — MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#temporal_dead_zone_tdZ) +- [JavaScript Hoisting Explained — MDN Web Docs](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting) +- [Understanding the Temporal Dead Zone in JavaScript — Tyler McGinnis](https://ui.dev/temporal-dead-zone) +- [Temporal Dead Zone (TDZ) Demystified — Dmitri Pavlutin](https://dmitripavlutin.com/javascript-temporal-dead-zone/) + +### video Videos + +- [Temporal Dead Zone Explained — Akshay Saini](https://www.youtube.com/watch?v=BNC6slYCj50) +- [Understanding let and const Scope — Academind](https://www.youtube.com/watch?v=9WIJQDvt4Us) +- [Hoisting and the TDZ — Web Dev Simplified](https://www.youtube.com/watch?v=5fF_obygkEc) + +### Additional Resources + +- [Exploring Default Parameters and TDZ — JavaScript.info](https://javascript.info/default-rest-parameters#temporal-dead-zone) +- [Hoisting, TDZ, and Strict Mode — Kyle Simpson](https://kylesschool.com/javascript-tdz-and-hoisting) + +**[⬆ Back to Top](#table-of-contents)** + ## License This software is licensed under MIT License. See [License](https://github.com/leonardomso/33-js-concepts/blob/master/LICENSE) for more information ©Leonardo Maldonado.