JavaScript’te Scope Kavramı
Scope Nedir ve Neden Kullanırız?
Scope (kapsam), bir program içinde tanımladığımız değişken, fonksiyon, objectlerin görünürlük ve erişebilirlik durumlarını belirler diyebiliriz. Başka bir deyişle, değişkenlerin izole edildiği ve hangi kod parçacıklarının bu değişkenlere erişebileceğini belirleyen bir kavramdır. Peki değişkenlerin görünülürlüğünü sınırlandırmamızın ve her yerden erişemememizin amacı nedir ? Bunun bize en büyük getirisi güvenliktir. Bunun yanı sıra programlarımızın daha düzenli ve anlaşılır olmasını sağlar. Değişkenlerin nerede tanımlandığı ve nerede kullanıldığı hakkında net kurallar koymak, kodumuzun hatalarını ve sorunlarımızı azaltmamıza yardımcı olur.
Scope Türleri Nelerdir ?
JavaScript’te iki tip scope vardır;
1) Global Scope
Global scope, bir programın en üst seviyesinde tanımlanan ve tüm programın erişebildiği bir değişken veya fonksiyonların kapsamını ifade eder. Bu genellikle yaygın kullanılan verilere veya fonksiyonlara erişmek için kullanılır. Ancak çok fazla global değişken kullanmak kodun karmaşık hale gelmesine ve hata ayıklamayı zorlaştırmasına neden olur. Bu sebepten global değişken kullanımı çok önerilmez. Son olarak local değişkenler işi bitince bellekten silinir ancak global değişkenler varlığını sürdürmeye devam eder bu durumda ciddi bellek sorunlarına yol açabilir.
Yuıkarıdaki örnekten de anlaşılacağı üzere global scope’ta tanımlanan değişkene her yerden ulaşabiliyoruz.
2) Local Scope
Local scope, bir programın içinde tanımlanan ve sadece belirli bir kod bloğunun veya fonksiyonun erişebildiği bir değişken veya fonksiyonun kapsamını belirten scope türüdür. (Her fonksiyonun kendi local scope’u bulunmaktadır.) JavaScript’te iki tür local scope bulunur. Bunlar;
a. Function Scope
Function scope, değişkenlerin bir fonksiyonun içinde tanımlandığında sadece bu fonksiyonun içinde geçerli olduğu kapsam türüdür. Fonksiyon dışındaki kodlar, bu fonksiyonun içinde tanımlanan değişkenlere erişemezler. Yani fonksiyon dışından bu değişkenlere erişemeyiz.
Yukarıdaki örnekte de gördüğümüz gibi fonksiyonun içinde tanımlanan localVariable değişkenine sadece myFunction fonksiyonundan erişebildik. Fonksiyonun dışından erişemeye çalıştığımızda ise hata aldık.
Block scope kavramına geçmeden önce ES6'nın bize birçok yenilik getirdiğini ve scope kavramında da bir takım değişiklikler yaşandığını söyleyebiliriz. ES6 ile beraber hayatımıza giren let ve const keywordleri tanıtıldı ve bu keywordlerle birlikte block scope kavramı JavaScript diline dahil edildi. Özetleyecek olursak let ve const block scope’tur.
b. Block Scope
Block scope, ES6 için tanıtılan let ve const keywordleri için geçerlidir. Bu tür değişkenler, süslü parantez ({ }) ile çevrilen kod bloklarının içinde (if, for, while, switch vb.) tanımlandığında sadece o kod bloğu içinde geçerli olur. Function scope’a göre daha kısıtlı bir kapsam sağlar.
Yukarıdaki örnekte let ve var değişkenlerini karşılaştırmalı olarak inceleyelim. myLet ve myVar değişkenlerine değerleri atadık. If bloğuna girdikten sonra myLet ve myVar’ın içindeki değerleri güncelleyip ekrana yazdırdık. If bloğundan çıktıktan sonra;
myLet’i ekrana yazdırdığımızda myLet değerini görüyoruz çünkü let için block scope demiştik.
myVar’ı ekrana yazdırdığımızda ise myVar 2 değerini görüyoruz doğal olarak.
Son olarak fonksiyon dışından erişmek istediğimizde ise ReferenceError … is not defined hatası aldık.
Özetleyecek olursak;
Global Scope: Fonkisyonun dışında tanımlanır ve dosyanın her yerinden erişilebilir.
Local Scope: Tanımlandığı fonksiyonlar içinde geçerlidir, fonksyion içinden erişilebilir.
Let ve Const: Block scope tabanlı ve tanımlanan değişkene en yakın parantezler içinde geçerlidir.
Block Scope: Let ve const ile tanımlandığında if, switch, for gibi veya sadece süslü parantezler olsun bu parantezler içinde geçerlidir.
Var — let-const farklarına başka bir yazıda değineceğim için olabildiğince scope kavramı üzerinden gitmeye çalıştım. Umarım faydalı bir yazı olmuştur, iyi çalışmalar.
Referanslar;
1.Asabeneh — 30 Days Of JavaScript
2.MDN Web Docs
3. W3 Schools
