JavaScript — var-let-const Farkları

Herkese merhaba; direkt var, let ve const kavramlarına geçmeden önce değişken kavramından biraz bahsedelim. Değişkenler; verileri saklamamıza, işlememize ve yönetmemize olanak tanır. Birçok programlama dilinde bulunan temel bir kavramdır. Peki neden değişkenlere ihtiyaç duyarız?
1.Verileri saklama
2.Değer aktarma
3.Hesaplamalar ve İşlemler
4.Durum ve Kontrol Akışı
5.Dinamik Programlama
6.Kodun Daha Okunabilir Olması
7.Debugging vb.

Şimdi ise var, let ve const keywordlerini kullanarak oluşturduğumuz değişkenlerin yapısını biraz inceleyelim. Öncelikle şunu bilmeliyiz ki var eski JavaScript sürümlerinde kullanılan bir değişken tanımlama yöntemidir. ES6 ile beraber hayatımıza let ve const kavramları girmiştir.
Let ve const ifadeleriyle başlayalım. Bu konu scope kavramıyla da oldukça ilgilidir, isteyenler buradan scope kavramı üzerine bilgi edinebilirler.

1)Let

Let, block scope’tur ve değişebilen değişkenleri belirlemek için kullanılır. Yani sonradan değiştirilebilir. Let’e initial durumunda bir değer vermediğimizde undefined durumunda olur. Son olarak let ile tanımlanan bir değişken aynı isimle tekrar tanımlanamaz.

2)Const

Const, block scope’tur ve değişmeyen (genelde) değerler için kullanılır. Yani const ile oluşturduğumuz değişkene tekrar değer atamayız. Const’a başlangıç değeri (initial value) vermek zorundayız yoksa hata alırız. Son olarak const ile tanımlanan bir değişken aynı isimle tekrar tanımlanamaz.

Öğrendiklerimizi kıyaslayacak olursak let ile oluşturulan değişkene tekrar değer atayabiliyoruz ancak const ile olşturulan değişkene takrar değer atamıyoruz. Let’e initial value vermezsek undefined oluyor const’a initial value vermezsek direkt hata alırız.

Peki let halihazırda tüm işimizi görüyorken hatta istediğimiz zaman değerini de değiştirebiliyorken neden const’a ihtiyaç duyarız bunun olayı nedir? Öncelikle bizim let’te avantaj olarak gördüğümüz değiştirilebilme özelliği aslında dezavantajdır. Yani const’un değiştirilemez (immutable) olması programın daha güvenli ve tahmin edilebilir olmasını sağlar. Bu yüzden kütüphane ve çatılarda const fazlasıyla tercih edilir.

O zaman let’i nerelerde kullanırız ? Let’i özel olarak değişmesini istediğimiz veya zaman içinde değişecek ifadelerde kullanabiliriz. Ayrıca ilk değeri ileride atanacaksa yine let kullanabiliriz

Yukarıdaki basit bir for döngüsünden de anlaşılacağı üzere i’nin program akışında değişmesini istiyoruz bu yüzden let ile tanımladık. Zaten const ile tanımlamaya çalışsaydık hata alırdık.

Const’u biraz daha detaylı inceleyelim

Const, block scope’tur ve değişmeyen (genelde) değerler için kullanılır demiştik. Peki genel olmayan durumlar nelerdir? Şimdi bir örnek yapalım ve onun üzerinden gidelim.

Biz const için değişmez demiştik ama yukarıdaki örnekte değişti ?
Bu durumu şöyle açıklayabiliriz; const değişkenleri bir dizi veya nesne referansını değiştirmezken, içeriklerini değiştirmemize izin verir. Böylece değişkenin kendisi sabit kalırken içerikleri güncellenebilir.

Yukarıda ilk satırda myArr adlı bir dizi oluşturduk, başlangıçta bir değer atadık ve ekrana yazdırdık. Ancak üçüncü satırda myArr’i tamamen yeni bir dizi ile yeniden tanımlamaya çalıştığımız (hafızada myArr adında başka bir referans yaratmaya çalıştığımız) için hata aldık. Özetle myArr’in direkt kendisini değiştiremeyiz ancak içindeki değeri değiştirebiliriz. (Yukarıdaki örnekleri dizi üzerinden yaptık diziler de bir nesnedir.)

Artık biraz da var keywordünden bahsedelim. Yukarıda var için eski JavaScript sürümlerinde kullanılan bir değişken tanımlama yöntemidir demiştik.

3)Var

Var, function scope veya global scope’tur. Değişebilen değerler için kullanılır. Var’a başlangıç değeri vermezsek undefined atanır. Son olarak var ile tanımlanan bir değişken aynı isimle tekrar tanımlanabilir.

Yukarıdaki örnekte gördüğümüz gibi bandName değişkenine atama yapmadığımız için undefined çıktısını verdi. Daha sonra Scorpions değerini atadık ve ekrana yazdırdık. If scope’una girdikten sonra bandName değişkenine Metallica değerini atadık ve ekrana yazdırdık. Ancak if scope’undan çıktıktan sonra bandName değişkeninde hala Metallica değeri yazıyor. Bu pek istediğimiz bir durum değildir, şimdi yukarıdaki örneğin aynısını let ile yaparsak daha iyi anlaşılacağını düşünüyorum.

Şimdi ise let ile bandName değişkeni oluşturup içine Scorpions değerini atayıp ekranda gösteriyoruz. If scope’una girdikten sonra değerini Metallica olarak değiştirip ekranda gösteriyoruz. Buraya kadar her şey var ile benzer tek fark, 9. satırda bandName değişkenini ekrana bastığımızda neden Scorpions çıktısını alıyoruz ? Çünkü let için block scope demiştik ve if scope’u içinde tanımladığımız bandName değişkenine sadece o scope içinden erişebiliriz yani o scope’ta yaşar ve ölür. Bu sebepten 9. satırda bandName değişkenini ekrana yazdırmak istediğimizde Scorpions çıktısını alıyoruz.

Var ile bir değişken oluşturduğumuzda default olarak global scope’ta oluşur. Bu, değişkenin programın herhangi bir yerinden erişebileceği anlamına gelir. Biz tarayıcıda çalıştığımız için var global window nesnesini gösterir yani window üzerinden var ile oluşturduğumuz değişkene ulaşabiliriz ama let ve const için böyle bir durum geçerli değildir. Bir örnek verecek olursak;

Hoisting Kavramı

Hoisting kelimesi “kaldırmak, yukarı çekmek” anlamına gelmektedir. Hoisting, değişken ve fonksiyon tanımlamalarının, kodun çalıştırılması öncesinde JavaScript tarafından işlenip hoist etmesi (yukarı çekilmesi) anlamına gelir. Hoisting sadece var için geçerlidir let ve const için hoisting kavramı geçerli değildir. Bunu da küçük bir örnekle gösterelim.

Yukarıdaki örnekte gördüğümüz gibi bandName’i ekrana bastırmaya çalıştık ve undefined aldık. Peki nasıl oldu bu ? JavaScript engine var ile tanımlanan değişkenleri yukarı hoist eder. Ancak bu hoisting sırasında değişkenler sadece tanımlanır, başlangıç değerleri atanmaz. Yani bir değişkenin tanımı, kodun çalıştığı bağlamda en üstte yer alır ancak değeri atanmadan önce kullanıldığında undefined olarak kabul edilir.

JavaScript’in önemli konularından biri olan var-let-const ile değişken tanımlarken arka tarafta neler döndüğünü olabildiğince sade bir şekilde anlatmaya çalıştım. Bu tarz birbirleriyle ilintili konuları ana konudan sapmadan anlatmaya çalışmak bazen zor olabiliyor. Umarım faydalı bir yazı olmuştur, iyi çalışmalar.

Referanslar;
1.Arin Yazılım
2.MDN Web Docs
3.W3 Schools