JavaScript Değişken Tanımlama Yolları
JavaScript örneklerinde yer bulduğu için bir ara yazıyla ifade etmek istediğim temel konulardan biri JavaScript tarafından sunulan değişken deklarasyonlarıydı.
Geçmişten gelen bir el alışkanlığı olarak benim sıklıkla kullandığım var
ES6 (ya da ES2015) ile birlikte yeni özelliklerle donatılmış let
ve const
alternatiflerine sahip.
Elbette seçenekler arasında farklı ihtiyaçlar çerçevesinde bir kullanım söz konusu. Konunun detaylarına geçmeden önce, bir hatırlatma yapmakta fayda var. let
ve const
modern tarayıcılar tarafından desteklenmekte. Dolayısıyla, tanımları projenin gereksinimleri doğrultusunda değerlendirmek faydalı olacaktır. Destekleyen tarayıcılar ile ilgili daha detaylı bilgiye ECMAScript Compat Table1 üzerinden ulaşabilirsiniz. Bu hatırlatmanın ardından tanımların özelliklerine geçebiliriz.
Javascript: Değişken Deklarasyonu
Değer atamadan sadece değişken oluşturma işlemine değişken deklarasyonu denmektedir. Bir değişkene ise ilk değerin atanması Bir değişkene ilk değeri atama işlemine değişken başlatma olarak ifade edilir. Aşağıdaki örnekte x
, y
ve z
değişkenleri farklı biçimlerde deklare edilmekte ve ilk değerlerini almaktalar. Kodu uyguladığınızda karşınıza 1 uyarı ve 7 hata çıkacaktır. Detaylarına değişken tanımları altında değineceğiz2.
x
x = 2;
var x = 4;
let y
y = 2;
let y = 2;
var y = 4;
const y = 6;
const z
z = 2;
let z = 4;
var z = 8;
Javascript: Değişken Tanımları
ECMAScript sözdizimi Java sözdizimine benzer ve kullanımı kolay bir komut dosyası dili olarak tasarlanmıştır. Örneğin, bir değişkenin3 türünün bildirilmesi çoğu durumda gereksizdir. Bir fonksiyon ve blok dışında tanımlanan bu değişken global olarak erişilebilir, yeniden tanımlanabilir ve yeni bir değer alabilir. Ancak, kod kalabalıklaştıkça kapsamlar bağlamında tanımlanan değişkenin değerinin çağırılması, yeni bir değişkenin tanımlanması, var olan bir değişkene yeni bir değer atanması gibi süreçlerde çeşitli problemlerle karşılaşmak mümkün olabilmektedir. Çünkü, çoğu zaman değişken(ler) kullanılacak alanlara ilişkili olarak, bir kapsam çerçevesinde ele alınır.
Global olarak tanımlanan bir değişkene her yerden erişilebilmektedir. Bir fonksiyon içerisinde, yani lokal olarak tanımlanan bir değişken ise sadece tanımlı olduğu fonksiyon ve alt fonksiyonlar içerisinde kullanılabilir. Bu noktada var
devreye girer. Aşağıdaki örnekleri jsfiddle üzerinden test edebilirsiniz.
Var
var
JavaScript dili içerisinde en temel değişken deklarasyonu ifadesidir. var
ile oluşturulan bir değişkene değer atanmazsa değişken ön tanımlı olarak undefined
olarak tanımlanır.
var x;
var y = 5;
console.log(x*y);
x = 10;
function fnc(){
var y = 2;
console.log(x*y);
}
fnc();
console.log(x*y);
var
tanımlı olduğu her yerden erişilebilir (global scope). Ancak, bir kapsam içerisinde yeni bir değer almışsa ilgili değer kapsam (function scope) ve alt fonksiyonlar (nested funstions) içerisinde işleme alınır. Yukarıdaki örnekte y
fonksiyon içerisinde 2
değerini almış ve bu değer üzerinden işlem gerçekleştirilmiştir. Ancak, fonksiyonun dışında 5
değeri ile işlem gerçekleşir.
Şimdi, bir de şu kodu çalıştırmayı deneyin.
x = 10;
function fnc(){
var y = 2; // yeni değer
z = 2;
console.log(x*y);
}
fnc();
console.log(x*y);
console.log(x*z);
Yukarıdaki örneklerde x
, y
ve z
değişkenlerinin nasıl hareket ettiğini gördük; değişkenlerin aldığı değerleri değiştirdik, değişkenleri yeniden tanımladık. Peki, bir değişkenin değerinin sonradan değiştirilmesini istemiyorsak ya da değişkenin bir defa tanımlanmasını sonrasında sadece yeni değerler alabilmesini istiyorsak? İşte bu gibi durumlarda const
ve let
deklarasyonları çözüm sağlamaktadır4.
Const
const
sabit değerli değişkenler yaratabilmemizi sağlar. Değşiken tanımlanırken verilen değer sonradan değiştirilemez ve değişken bir defa tanımlanabilir. Ancak, çeşitli istisnalar söz konusu olabilir. Örneğin, global olarak oluşturulan bir const
değişken bir fonksiyon içerisinde yeniden ele alınabilir5.
const x = 10;
function fnc(){
x = 20;
y = 2;
console.log(x*y);
}
fnc();
console.log(x*y);
fnc
içerisindeki x
büyük ihtimalle hata almanıza neden olacaktır. Ancak, değişkenin başına var
eklerseniz hatanın ortadan kalktığını görebilirsiniz. Diğer yandan, var
ile fonksiyonun dışında tekrar x
değişkenini tanımlamak veya değer atamak isterseniz yine hata ile karşılaşırsınız. Son olarak, y
değişkenini const
olarak fonksiyon içerisinde tanımlarsak tüm sınırlandırmalar o fonksiyon içerisinde söz konusu olur. Fonksiyonun kapsamı dışında yeniden y
değişkeni tanımlanabilir ve yeni değer alabilir. Ancak, fonksiyon içerisindeki değerine ulaşılamaz.
Let
let
ile tanımlanan değişkene yeni değerler atayabiliriz. Ancak, değişkeni yeniden oluşturamayız. let
blok kapsama (block scope) sahiptir. Yani, let
ile oluşturulan değişken sadece oluşturulduğu süslü parantezler {}
(if-for gibi) içerisinde kullanılabilir, dışarısından erişilemez6 7.
let x = 10;
function fnc(){
let y = 2;
console.log(x*y);
}
fnc();
console.log(x*y);
let y = 4;
console.log(x*y);
y = 8;
console.log(x*y);
var y = 16;
console.log(x*y);
Kodu uygulamak istediğinizde alacağınız ilk hata y
değişkeninin daha önce let
ile deklare edildiği ile ilgili olacaktır. Diğer hata ise y
değişkeninin daha önce deklare edildiği ile ilgilidir. Ancak, her iki hata farklı y
tanımlarını kapsamaktadır. Yukarıdaki örnekte yer alan y
değişkenlerini sırası ile silerek x*y
sonucunun nasıl değiştiğini görebilirsiniz. Tüm bu bilgileri bir tablo ile özetleyelim.
Özellikler | Var | Const | Let |
---|---|---|---|
Global Kapsam (global scope) | + | + | + |
Fonksiyon Kapsamı (function scope) | + | + | + |
Blok Kapmsamı (block scope) | - | + | + |
Yeniden tanımlanabilir mi? | + | - | - |
Yeni değer alabilir mi? | + | - | + |
Son Olarak
JavaScript değişken deklarasyonunda bir ek noktadan daha baksetmekte fayda var. Kimi JS kodlarında değişkene önce değer atanıp sonra tanımlandığını görmüş olabilirsiniz. Bu durum çıkarma (hoisting) olarak ifade edilmektedir. JavaScript derleme öncesinde ilgili işlemi bir sıra ile yürütür ve bu nedenle hata almayız.
x = 10;
console.log(x);
var x;
y = 10;
console.log(y);
const y;
z = 10;
console.log(z);
let z;
Ancak bu durum var
için geçerlidir; let
ve const
ile deklare etmek istediğimizde hata alırız. const
kullanımı bize x
değişkeninin kalıcı olarak yani const
ile tanımlandığı, let
ise x
değişkeninin daha önce deklare edildiği hatasını döndürür.