Typecsript Dersleri - var & let Arasındaki Farklar

Typescript Dersleri’nde prosedürel programlama ile ilgili yazılara var, let ve const gibi anahtar kelimelerle değişken atama işlemini ve aralarındaki farkı anlatarak devam ediyorum. Javascript’te var ve herhangi bir keyword kullanmadan değişken atayabiliyoruz ama Typescript let ve const gibi iki farklı keyword daha ekliyor çantamıza. Madem hepsi değişken atıyor, neden farklı keywordlar var ve aralarında nasıl bir fark var?

let & var arasındaki farklar

kapsam farkı

Anladığım kadarıyla let ve var arasındaki en belirgin fark scope yani kapsam meselesi. Örnek üzerinden anlatmam daha güzel olacak sanırım.

function yolculukAngular() {
    for (var i = 0; i < 10; i++) {
        console.log(i);
    }
    console.log(“Final i is:” + i);
}

Öncelikle blogun ismiyle bir fonksiyon tanımladık. Fonksiyonumuzun içinde ise bir for döngümüz var. Döngü içerisindeki i değişkenini var keyworduyla tanımladık. Döngü, i = 0 ve i =10 arasında i’yi birer artırarak ekrana yazdıracak. Döngünün dışında yine bir console.log() fonksiyonumuz var ve görevi i’nin final değerini ekrana yazdırmak. Fonksiyonu çağırıp kodu çalıştırdığımızda karşımız şöyle bir ekran gelecek;



Gördüğünüz üzere 9’a kadar değerler ekrana yazdırılmış ve i = 10 denendikten sonra eşitliğe uymadığı anlaşılıp döngüden çıkılmış. Final değeri 10 olarak kaldığı için de for bloğu dışında yazdığımız fonksiyon ekrana 10 değerini basmış. Burada problem oluşturabilecek bir konu var (tabi kendi çıkarımımım bu, daha fazlası da olabilir). var keywordu kendisine kapsama alanı olarak en yakın ebeveyn bloğu tercih ediyormuş. Yani bizim durumumuzda bu yolculukAngular fonksiyonu oluyor. Dolayısıyla biz i değişkenini bu bloğun içindeki her yerde kullanabiliyoruz.

Şimdi aynı işlemi let anahtar kelimesiyle deneyelim. Sadece for döngüsü içerisindeki ‘var i’ yi ‘let i’ yapıyorum.



Görselde görüldüğü üzere editörümüz bizi uyarıyor. i gibi bir değişken bulunamadığını söylüyor. Yani döngünün içindeki değişken atama işlemini göremiyor. Kodu derlemeye kalktığımızda ise Typescript Compiler bize şunu söylüyor;

tsc yolculuk-angular.ts
yolculuk-angular.ts(5,30): error TS2304: Cannot find name 'i'.

re-declaration

İkinci bir mesele de re-declaration meselesi. Çok detayına inmeyeceğim ama üstünde geçeceğim biraz. var keywordu ile bir değişken atadığımız zaman, kodumuzun farklı bir yerinde aynı değişkene farklı bir değer atayabiliyoruz. Örnek vermek gerekirse;

var x = 5;

//bir miktar kod

var x = 10;

Gördüğünüz kod herhangi bir hata vermeden çalışacaktır. İlk satırdaki var keywordunu let’e çevirdiğimizde editörümüz neler diyor bir bakalım?



let anahtar kelimesi aynı kapsam üzerinde aynı değişkene farklı değerler atamayı mümkün kılmıyor. const keywordu bir miktar kafamı arıştırdı o yüzden daha detaylı öğrenip farklı yazı yazacağım onun için. Umarım let ve var keywordları arasındaki farkı anlatabilmişimdir.