Демистификация временной мертвой зоны в JavaScript!

Демистификация временной мертвой зоны в JavaScript!

JavaScript — один из тех языков программирования, которые могут заставить вас почесать голову, и TDZ (временная мертвая зона) может быть одной из причин этого, но не волнуйтесь, после прочтения этой статьи TDZ станет для вас проще простого. Итак, начнем!

При работе с JavaScript вы, возможно, много раз сталкивались с термином Временная мертвая зона. Хотя на первый взгляд это может показаться сложным, это важная концепция, которую необходимо понять, чтобы избежать непредвиденного поведения в вашем коде (которое может заставить вас бросить работу и отправиться в Гималаи). В этой статье мы простыми для понимания терминами разберем временную мертвую зону и выясним, почему она важна для вашей разработки на JavaScript.

Что такое временная мертвая зона!?

Временная мертвая зона (TDZ) относится к определенной фазе выполнения кода JavaScript, когда переменная, объявленная с помощью ключевых слов let или const, существует, но недоступна (звучит странно, правда?). Это происходит внутри области действия переменной, начиная с момента объявления и до тех пор, пока переменной не будет присвоено значение.

Проще говоря, если вы попытаетесь получить доступ к переменной до того, как ей будет присвоено значение, вы столкнетесь с временной мертвой зоной, и ваш код может выдать ошибку или привести к неожиданным результатам.

Почему существует временная мертвая зона!?

Введение временной мертвой зоны тесно связано с концепцией подъема переменных в JavaScript. Когда вы объявляете переменную с помощью let или const, переменная поднимается в начало своей области видимости. Однако, в отличие от переменных, объявленных с помощью var, переменные, объявленные с помощью let и const, не инициализируются сразу после объявления. Это предотвращает использование переменной до того, как ей явно будет присвоено значение(что было невозможно с var). Следовательно, на данный момент (временно) переменная в вашем коде явно не инициализирована, ее объявление бесполезно (мертвая зона).

Временная мертвая зона была введена, чтобы помогать выявить потенциальные проблемы, вызванные доступом к переменным до их инициализации. Эта концепция помогает разработчикам писать более надежный, надежный и предсказуемый код.

Примеры временной мертвой зоны

Давайте посмотрим на несколько примеров, иллюстрирующих временную мертвую зону:

console.log(myVariable); // Throws a ReferenceError
let myVariable = 10;

В этом примере попытка доступа к myVariable до его объявления приводит к ошибке ReferenceError. Переменная поднимается, но находится во временной мертвой зоне до тех пор, пока не встретится оператор let, где она была инициализирована.

if (condition) {
  console.log(myValue); // Throws a ReferenceError even if the condition is met
  let myValue = 42;
}

Даже если условие внутри оператора if выполнено, доступ к myValue до его объявления все равно выдает ошибку ReferenceError. Это связано с тем, что временная мертвая зона существует до тех пор, пока не будет выполнен оператор let.

Но думаете ли вы, что в приведенном ниже примере компилятор выдаст ошибку?

function myFunction(){
    console.log(x);     // Output: 3
}
let x= 3;
myFunction(); 

Вывод приведенного выше фрагмента будет 3, но почему!?

Причина этого в том, что даже если переменная x кажется доступной выше ее инициализации, на самом деле функция, в которой регистрируется переменная, вызывается после инициализации переменной x, следовательно, компилятор не пропускает ошибку ссылки.

function myFunction(){
    x = 2
    console.log(x);     // Output: 2
}
let x= 5;
myFunction();