JavaScript Değişken Tanımlama Yolları

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 Table¹ ü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ğiz².

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şkenin³ 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ır⁴.

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ınabilir⁵.

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şilemez^{6 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.

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.

İleri Okumalar

• Tyler McGinnis, var vs let vs const in JavaScript (Jan 1, 2019), tylermcginnis.com
• Sarah Cahima, Var, let and const- what’s the difference? (Oct 25, 2017), dev.to.
• Aurelio De Rosa, ES6 in Action: let and const (Apr 6, 2018), sitepoint.com