JavaScript’te “Temporal Dead Zone” (TDZ) Kavramı

Bu yazımızda, JavaScript’te “Temporal Dead Zone” (TDZ) kavramını detaylı bir şekilde ele alacağız. Bu kavramın ne olduğunu, neden önemli olduğunu ve JavaScript’teki kodunuzu nasıl etkilediğini öğreneceksiniz. Eğer JavaScript’te daha önce karşılaştığınız bazı hataları anlamakta zorlandıysanız, TDZ’nin bu hataların arkasında olup olmadığını keşfetmek için doğru yerdesiniz.

“Temporal Dead Zone” (TDZ) Nedir?

JavaScript’te “Temporal Dead Zone” (TDZ), bir değişkenin tanımlandığı yer ile bu değişkenin değer atandığı yer arasında kalan bölgeyi ifade eder. Bu bölgede, ilgili değişkene erişmeye çalıştığınızda bir hata alırsınız. TDZ kavramı, özellikle let, const ve class anahtar kelimeleriyle tanımlanan değişkenler için geçerlidir.

ES6 (ECMAScript 6) güncellemesi ile birlikte JavaScript dünyasına giren let ve const anahtar kelimeleri, var anahtar kelimesinden farklı olarak değişkenlerin blok seviyesinde tanımlanabilmesini sağlamıştır.

JavaScript’te const ve let anahtar kelimeleri, var anahtar kelimesine göre daha güçlü kapsam (scope) ve başlangıç değeri kısıtlamalarına sahiptir. Bu farklılıklar nedeniyle const ve let ile tanımlanan değişkenlerde TDZ kavramının etkisi görülürken, var ile tanımlanan değişkenlerde görülmez. Bir örnek üzerinden gösterirsek sanırım daha net anlaşılacaktır. Bakınız:

console.log(myVar); // undefined
var myVar = 5;
console.log(myVar); // 5

Yukarıdaki örneğimizde, var anahtar kelimesiyle tanımlanan myVar değişkenine ilk satırda erişim sağlandığında, TDZ kavramı uygulanmaz ve değişkenin değeri “undefined” olarak döner. Bu durumun gözlemlenmesi, hoisting adı verilen bir kavramla ilgilidir. Ancak let ve const anahtar kelimeleri için durum farklıdır. Bunun için aşağıdaki örneği inceleyiniz:

console.log(myLetVar); // ReferenceError: myLetVar is not defined
let myLetVar = 5;

Bu örneğimizde ise, let ile tanımlanan myLetVar değişkenine erişmeye çalıştık ama bir “ReferenceError” hatası aldık. Bunun nedeni, let ve const ile tanımlanan değişkenlerin TDZ’de olmasıdır. Yani let ve const ile tanımlanan değişkenler, tanımlandıkları satırdan önce kullanılmaya çalışılırsa TDZ’ye düşer ve ReferenceError hatasına yol açar.

Anlaşılacağı üzere TDZ, değişkenin tanımlandığı yerle değer atandığı yer arasında kalan bir “yasak bölge”yi ifade eder. Bu yasak bölgede, değişkene erişmeye çalışırsak hata alırız. Bu durum spesifik olarak, let, const ve class anahtar kelimeleriyle tanımlanan değişkenler için geçerlidir. Bir başka örnek için:

console.log(myVar); // Bu satırda hata alırsınız çünkü myVar henüz tanımlı değil ve TDZ içerisinde.
let myVar = 5;
console.log(myVar); // Bu satırda hata almazsınız çünkü myVar artık TDZ dışında ve değeri atanmış.

Bu örnekte, let ile tanımlanan myVar değişkenine ilk console.log satırında erişmeye çalıştığımızda TDZ içerisinde olduğu için hata alırız. İkinci console.log satırında ise TDZ dışındadır ve bu yüzden değişkenin değerini sorunsuzca görebildik.

console.log(color1); // TDZ'ye düşer ve ReferenceError hatası alırız.
let color1 = "blue";
function changeColor() {
  console.log(color2); // Yine TDZ'ye düşer ve ReferenceError hatası alırız.
  let color2 = "red";
}

TDZ’nin amacı sanırım net bir şekilde gözlemlenmiştir. TDZ’nin amcı, değişkenlere değer atanmadan önce onlara erişimi engellemektir. Bu da, kodun daha tahmin edilebilir ve güvenli olmasına yardımcı olur. Bu nedenle, ReferenceError şeklinde kendini gösteren TDZ’den korunmak ve bu tür hataları önlemek için değişkenleri kullanmadan önce tanımlamalıyız. Yani, değişkenleri herhangi bir değer atamadan önce kullanmamalıyız.

let color = "blue"; // Değişkeni kullanmadan önce tanımlayın.
console.log(color); // "blue" çıktısını alırız.