JavaScript’te “Shadowing” (Gölgeleme) Kavramı

Bu yazımızda, JavaScript’te “shadowing” (Gölgeleme) kavramını detaylıca ele alacağız. Gölgeleme, değişkenlerin kapsamları arasındaki etkileşimleri anlamamıza yardımcı olan önemli bir konsepttir ve özellikle iç içe fonksiyonlar veya bloklarla çalışırken karşımıza çıkar.

“Shadowing” Nedir?

JavaScript’te “shadowing” kavramı, özellikle iç içe geçmiş kapsamlarda karşımıza çıkar ve bir değişkenin iç içe olan kapsamlarda aynı isimle tekrar tanımlanmasını ifade eder. Bu durumda, içteki kapsamda tanımlanan değişken, dıştaki kapsamda aynı isimle tanımlanmış olan değişkeni “gölgelemiş” olur. Örneğin:

let color = "Mavi";

function showColor() {
    let color = "Kırmızı";
    console.log(color); // Kırmızı
}

showColor();
console.log(color); // Mavi

Bu kodda, global kapsamda color adında bir değişken tanımladık ve değerini “Mavi” olarak atadık. Daha sonra, showColor adında bir fonksiyon tanımladık ve bu fonksiyonun içerisinde yine color adında bir değişken daha tanımladık fakat bu sefer değerini “Kırmızı” olarak atadık. Bu durumda, showColor fonksiyonunun içerisinde color değişkenine erişmeye çalıştığımızda, fonksiyon içerisinde tanımlanan “Kırmızı” değerini alırız. Ancak fonksiyon dışında color değişkenine erişmeye çalıştığımızda global kapsamda tanımlanan “Mavi” değerini alırız.

Yukarıdaki örnek, “shadowing” kavramının ne olduğunu net bir şekilde göstermektedir. Zira showColor fonksiyonu içerisinde tanımlanan color değişkeni, global kapsamda tanımlanan color değişkenini gölgelemektedir. Bu nedenle, fonksiyon içerisinden eriştiğimizde farklı bir değere ulaşırız.

Fonksiyon Kapsamda Gölgeleme

Eğer bir değişken, var anahtar kelimesi ile bir fonksiyon kapsamında tanımlandıysa ve aynı isimde bir değişken, let veya const anahtar kelimeleri ile aynı fonksiyonun bir blok kapsamında tanımlandıysa, bu durumda blok kapsamındaki let veya const ile tanımlanan değişken, fonksiyon kapsamında var ile tanımlanan değişkeni gölgelemiş olur.

function shadowing() {
  var x = 10;
  if (true) {
    let x = 20;
    console.log(x); // 20
  }
  console.log(x); // 10
}

shadowing();

Yukarıdaki örnekte, shadowing fonksiyonunun içerisinde var ile x adında bir değişken tanımladık ve değerini 10 olarak atadık. Ardından aynı fonksiyonun içerisinde bir if bloğunda, let ile aynı isimde x değişkenini tekrar tanımladık ve değerini 20 olarak atadık. let ile tanımlanan x, bu blok kapsamında var ile tanımlanan x değişkenini gölgelemiştir. Bu nedenle blok içerisindeki console.log(x) ifadesi “20” sonucunu verirken, blok dışındaki console.log(x) ifadesi “10” sonucunu verir.