JavaScript
Explica la Temporal Dead Zone de let, const y class, desde el inicio del scope hasta la inicialización, incluyendo typeof y parámetros por defecto.
La Temporal Dead Zone, o TDZ, es el periodo entre el comienzo de un scope y el momento en que un binding léxico queda inicializado.
console.log(value); // ReferenceError
const value = 10;La TDZ evita que el código utilice una variable antes de que su declaración haya establecido un valor coherente.
const tax = subtotal * taxRate;
const taxRate = 0.19;Sin el error, taxRate podría leerse en un estado incompleto y producir resultados difíciles de detectar.
La TDZ convierte ese problema en un fallo inmediato y visible.
Para un binding de bloque, la TDZ comienza al entrar en el bloque y termina cuando la ejecución alcanza su declaración.
{
// TDZ de price.
const subtotal = 100;
// TDZ de price.
const price = 50;
// price ya está inicializado.
console.log(price);
}La palabra “temporal” se refiere al orden de ejecución dentro del scope.
let no exige un valor explícito, pero se inicializa cuando la ejecución alcanza la declaración.
console.log(count); // ReferenceError
let count;
console.log(count); // undefinedAntes de let count, está en TDZ. Después de la declaración, existe con valor undefined.
const value; // SyntaxErrorconst debe recibir un valor en la misma declaración porque después no puede reasignarse.
const value = 10;Esto no vuelve inmutable al valor; solo impide reasignar el binding.
const product = new Product(); // ReferenceError
class Product {}La clase no puede utilizarse antes de su declaración.
typeof normalmente permite preguntar por un nombre inexistente sin lanzar error.
typeof missingValue; // "undefined"Pero falla cuando el nombre pertenece al scope y está en TDZ.
typeof value; // ReferenceError
const value = 10;La diferencia es importante:
missingValue no tiene binding resoluble.value sí tiene binding, pero todavía está sin inicializar.const status = "outside";
{
console.log(status); // ReferenceError
const status = "inside";
}El binding local status oculta al exterior durante todo el bloque, incluso antes de su declaración.
JavaScript no “salta” hacia el binding exterior mientras el local está en TDZ.
function example(condition) {
if (condition) {
console.log(value);
}
const value = 10;
}example(true) produce ReferenceError.example(false) no intenta acceder a value antes de inicializarlo y termina normalmente.La TDZ existe durante ese periodo, pero solo produce error cuando el código intenta acceder al binding.
Los parámetros por defecto se evalúan de izquierda a derecha.
function example(first = second, second = 10) {
return first + second;
}
example(); // ReferenceErrorCuando se evalúa first = second, el parámetro second todavía no fue inicializado.
La dirección contraria sí funciona:
function example(first = 10, second = first) {
return first + second;
}
example(); // 20Este es un caso menos frecuente, pero demuestra que la TDZ también aparece en entornos de parámetros.
let crea bindings de bloque y, en ciertos bucles, un binding nuevo por iteración.
for (let index = 0; index < 3; index++) {
// Cada iteración trabaja con su binding correspondiente.
}Esto será especialmente importante al estudiar closures y callbacks dentro de bucles.
const taxRate = 0.19;
const tax = subtotal * taxRate;const subtotal = calculateSubtotal(items);
const taxRate = getTaxRate(country);
const total = subtotal + subtotal * taxRate;const value = 10;
{
console.log(value);
const localValue = 20;
}Aunque una declaración de función puede llamarse antes, mantener un orden claro reduce la carga mental.
La Temporal Dead Zone es un estado semántico del binding.
No significa que exista un área especial de memoria llamada TDZ. Significa que las operaciones de lectura o escritura sobre ese binding están prohibidas hasta su inicialización.
let y const no existen antes de su declaración.undefined como var.typeof esperando evitar cualquier ReferenceError.const.let, const, class y otros bindings léxicos.let sin inicializador queda en undefined después de su declaración.const necesita un inicializador.typeof lanza ReferenceError sobre un binding en TDZ.¿Qué ocurre aquí?
const message = "outside";
function showMessage() {
console.log(message);
let message = "inside";
}
showMessage();Se produce un ReferenceError.
El message local pertenece a todo el scope de la función y oculta al exterior, pero todavía está sin inicializar cuando se ejecuta el console.log.
Contextos de ejecución conecta los scopes preparados con lo que ocurre cada vez que el programa o una función comienza a ejecutarse.