Javascript Scope
Oguzcan Emegil ve Uğur Atmaca ile birlikte katıldığımız nodejs hackathonunda popülerlik dalında birinci olduk frontend masters üzerinden bir yıllık üyelik kazandık. Buradaki eğitimlere göz gezdirirken bir javascript serisi yayınlamaya karar verdim ve bunun da ilkini scope konusunda yazmak istedim. Yazı boyunca Türkçe karşılığı olan kapsam kelimesini kullanacağım.
JavaScript Scope Nedir?
Değişkenleri birer bilye olarak tanımlayacak olursak kapsamlar da bu bilyeleri içinde tutan kaselerdir. Javascript kapsamları fonksiyon bazında oluşurlar ve bu kapsamın değişkenlerine dışarıdan ulaşamazsınız.
Yukarıdaki örneği inceleyelim. Javascript motoru, yazılmış kodu ilk geçişinde derler. Bu derleme sırasında ilgili bilyeleri ilgili kaselere koyar.
Motor ilk satırın üzerinden geçerken var
anahtar kelimesini görür ve global kapsam içinde olduğu için global kapsama bir soru sorar ‘global kapsam sende foo
isimli değişken var mı?’ global kapsam da ona cevap verir ‘hayır yok’. Bu cevaptan sonra global kapsam kasesine foo
isimli bir bilye eklenir.
Motor 3. satıra geldiğinde function
anahtar kelimesini görür ve abc
isimli bir kapsam oluşturur. Artık sorularını bu kapsama soracaktır.
Motor 4. satıra gelir ve sorusunu sorar. ‘abc kapsamı sende foo
isimli bir değişken var mı?’ O da cevap verir ‘Hayır yok.’. Yoktur çünkü bir önceki foo
değişkeni global kapsamdadır. abc
kasesine foo
isimli bilyeyi ekler.
Motor 7. satıra geldiğinde xyz
isimli bir kapsam daha oluşturur. Bu fonksiyon parametre alan bir fonksiyondur. Parametre de xyz
kapsamı için bir değişkendir ve kaseye bu parametre için foo
isminde bir bilye eklenir.
Motor 8. satıra geldiğinde yine sorusunu sorar ‘xyz kapsamı sende foo
isimli bir değişken var mı?’. Cevap: ‘Evet var’.
Motor 9. satıra geçer. Soruyu sorar ‘xyz kapsamı sende bam
isimli bir değişken var mı?’. ‘Hayır yok.’. Motor, bu satırda var
anahtar kelimesini görmediği için aynı soruyu global kapsama da sorar. Global kapsam cevap verir. ‘Iııııı yok ama ben senin için oluşturayım bari’. Bu cevabın ardından global kapsam kasesine bam
isimli bir bilye daha eklenir.
Böylece motor kod üzerinden ilk geçişini tamamlamış ve ilgili bilyeleri ilgili kaselere koymuştur.
Motor kodu çalıştırdığında ne olacaktır. Bunu izleyebilmek için çeşitli yerlere console.log()
fonkisyonunu koyalım ve izleyelim.
Motor 1. satıra gelir ve foo
değişkenine ‘bar’ değerini atar.
Daha sonra 15. satıra gider ve abc()
fonksiyonunu çağırır. Bu fonksiyonu çalıştırmaya başladığında artık onun kapsamındadır.
İlk karşılaştığı satır 4. satır olan console.log(foo)
satırıdır. Bu konsola undefined
yazdıracaktır. Çünkü foo
değişkeni abc
kapsamı için ayrıca tanımlanmıştır fakat henüz değer atanmamıştır.
5. satırda abc
kapsamındaki foo
değişkenine ‘abc’ değeri atanır.
6. satırda konsola artık abc
yazar ve fonksiyondan ayrılır.
16. satırdaki xyz
fonksiyonunu işleten motor. Konsola önce klm
sonra da xyz
yazdırır ve bam
değişkeninin değerini ‘yay’ olarak ayarlar.
17. satırda ise; bam
değişkeni hatırlarsanız global kapsamdaydı ve biz onun değerini xyz
kapsamında değiştirmiştik, bu sebeple konsola yay
yazacaktır.
18. satıra geldiğinde global kapsamdaki foo
değişkeninin ilk ayarlandığı değer hiç değiştirilmediği için konsolda bar
yazacaktır.
Sonuç olarak her kapsam kendi içinde oluşturulan değişkenleri bilir ve kullanır.
Son olarak aşağıdaki örneği inceleyerek konsola ne yazdıracağını da siz bulun.