Javascript’te kapsama alanı(scope) olarak belirttiğimiz alan, erişebileceğiniz değişkenler kümesidir.
Daha önce de söylediğimiz gibi, Javascript’te nesneler ve fonksiyonlarda birer değişkendirler. Bu durumda tanımımızı biraz daha genişletecek olursak;
Javascript’te kapsama alanı; erişebileceğiniz değişkenler, nesneler ve fonksiyonların kümesidir diyebiliriz.
Ayrıca javascript kapsama alanı fonksiyona da bağlıdır. Yani kapsama alanı fonksiyonun içinde değiştirilebilir.
Yerel Javascript Değişkenleri
Değişkenleriniz bir fonksiyonun içinde tanımlanmışlar ise, fonksiyona özel, yani fonksiyonun yerel değişkenleri olurlar. Dolayısıyla bu değişenlerin kapsama alanı fonksiyonun içidir. Sadece fonksiyonun içinde bu değişkenlere erişilebilir ve kullanılabilir. Fonksiyonun dışında bu değişkenler bir anlam ifade etmezler.
<!DOCTYPE html>
<html>
<body>
<p id="deneme"></p>
<script>
function arabaBul() {
var araba = "Volvo";
}
arabaBul();
document.getElementById("deneme").innerHTML = araba;
</script>
</body>
</html>
Bu web sayfasındaki javascript kodunda “arabaBul()” isimli bir fonksiyon içerisinde bir “araba” değişkeni tanımlanıyor. BU değişken yerel bir değişkendir ve sadece bu fonksiyonun kapsama alanında yani fonksiyonun içinde kullanılabilir. Oysa javascript kodu içinde arabaBul() fonksiyonuna çağrı yaparak onu çalıştırıyoruz ve innerHTML metoduyla “araba” değişkeninin değerini ekrana yazdırmaya çalışıyoruz. Sonuç başarısız olacaktır. Ancak innerHTML metodunu fonksiyonun içinde kullansaydık, işte o zaman araba değişkenine erişebilecek ve ekrana yazdırabilecektik.
<!DOCTYPE html>
<html>
<body>
<p id="deneme"></p>
<script>
function arabaBul() {
var araba = "Volvo";
document.getElementById("deneme").innerHTML = araba;
}
arabaBul();
</script>
</body>
</html>Yerel değişkenler yalnızca içinde bulundukları fonksiyonun içinde kullanılabilirler. Aynı isme sahip değişkenler farklı fonksiyonların içinde kullanılabilir. Çünkü bu değişkenlerin kapsama alanı sadece kendi ait oldukları fonksiyonlardır. Yerel değişkenler ait oldukları fonksiyonlar ile başlatılır ve fonksiyon bittiğinde silinirler.
Genel Javascript Değişkenleri
Fonksiyonlar dışında tanımlanan Javascript değişkenleri Genel Javascript Değişkenleridir. Genel değişkenlerin kapsama alanı da geneldir. Yani tüm fonksiyonlar ve tüm scriptler tarafından bu değişkenlere erişilebilir ve kullanılabilirler.
Örneğin bir önceki konuda verdiğimiz kodu kullanarak değişkeni genel olarak tanımlayalım ve fonksiyon içinden bu değişkene ulaşıp kullanalım.
<!DOCTYPE html>
<html>
<body>
<p id="deneme"></p>
<script>
var araba = "Volvo";
function arabaBul() {
document.getElementById("deneme").innerHTML = araba;
}
arabaBul();
</script>
</body>
</html>Eğer bir değişkeni tanımlamadan değer atarsanız, o değişken otomatik olarak Genel Javascript Değişkeni olur ve ister bir fonksiyonun içinde isterse dışında olsun tüm fonksiyonlar ve scriptler tarafından kullanılabilir.
Örneğin; Yerel Javascript Değişkenleri konusundaki çalışmayan kod örneğimizin aynısı alalım. Bu kod fonksiyon içinde tanımlanan ve bir değer atanan değişkene fonksiyon dışından ulaşmaya çalıştığımız için çalışmamıştı.
<!DOCTYPE html>
<html>
<body>
<p id="deneme"></p>
<script>
function arabaBul() {
var araba = "Volvo";
}
arabaBul();
document.getElementById("deneme").innerHTML = araba;
</script>
</body>
</html>
Şimdi küçük bir değişiklik yapalım ve sadece fonksiyon içindeki değişkenin başındaki “var” değişken tanımlama anahtar kelimesini silelim. Bu durumda fonksiyonun içindeki değişkeni tanımlamadan değer atamış olacağız ve dolayısıyla değişkenimizde Genel Javascript Değişkeni kapsama alanına sahip olacağı için fonksiyon dışından da ulaşılabilir ve kullanılabilir olacak.
<!DOCTYPE html>
<html>
<body>
<p id="deneme"></p>
<script>
function arabaBul() {
araba = "Volvo";
}
arabaBul();
document.getElementById("deneme").innerHTML = araba;
</script>
</body>
</html>HTML’de Genel Değişkenler
Javascript’te genel kapsama alanı tüm Javascript ortamıdır. HTML’de, genel kapsama alanı “window” nesnesidir. Tüm genel değişkenler “window” nesnesine bağlıdır. Yani genel değişkenler window nesnesinin özellikleridir. Yani şu şekilde tanımlanmış bir nesne gibi davranırlar :
var window = { GenelDeğişken1:“Değeri”, GenelDeğişken2:“Değeri”, ….. };
<!DOCTYPE html>
<html>
<body>
<p id="deneme"></p>
<script>
var araba = "Volvo";
document.getElementById("deneme").innerHTML = window.araba;
</script>
</body>
</html>Değişkenlerin Yaşam Süresi
Değişkenler onları tanımladığınız anda yaşam döngüsüne başlarlar. Yerel değişkenler, fonksiyon tamamlandığında yaşam döngülerini tamamlayarak silinirler. Genel değişkenler ise web sayfasını kapattığınızda yaşam döngülerini tamamlayarak silinirler.
Fonksiyonların aldıkları parametreler ise fonksiyon içindeki değişkenler gibi davranırlar.
Bağlantıda Kalalım