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.