ES6 Değişkenler (var, let, const)

ES6 öncesi değişken tanımlamak için sadece var keyword’ü kullanılıyorken, ES6 ile birlikte hayatımıza let ve const keyword’leri girdi. Her ne kadar temelde bu üç keyword’ün görevi de değişken tanımlamak olsa da aslında her biri farklı ihtiyaçlara cevap veriyor.

ES6 henüz tüm browser’larda desteklenmediğinden ES6 ile yazılmış kodların düzgün çalışabilmesi için babel benzeri transpile tool’larına ihtiyaç var.

Örnekler üzerinden bu keyword’leri inceleyecek olursak;

var

var keyword’ü aralarında en geniş kapsama sahip keyword’dür. Örneklerle inceleyecek olursak

• Sonradan tekrar değiştirilebilir
• Kodun herhangi bir noktasında tekrar tekrar tanımlanabilir.
• Sadece fonksion ile kapsanabilir (function scope) fonksiyon süslü parantezleri içerisinde var ile tanımlanan değişkene dışarıdan erişilemez.

var isim = 'irfan';

console.log(isim); // "irfan" döner

isim = 'simsar'; // sonradan değiştirilebilir

var isim = 'deneme'; // tekrar tekrar tanımlanabilir

function yasiAyarla (_yas) {
  var yas = _yas;
  console.log(yas);
}

yasiAyarla(30);

console.log(yas); // undefined döner

 let

let keyword’ü sadece tanımlandığı kapsam (block scope) içerisinden erişilebilir. Block scope’dan kasıt her bir süslü parantezin ({}) içerisidir

• Sonradan tekrar değiştirilebilir
• Aynı kapsam (scope) içerisinde sadece bir sefer tanımlanabilir. Tekrar tanımlanmaya çalıştığında kod hata verir ve çalışmayı durdurur.

let isim = 'irfan';

console.log(isim); // "irfan" döner

isim = 'simsar'; // sonradan değiştirilebilir

let isim = 'deneme'; // Uncaught SyntaxError: Identifier 'isim' has already been declared hatası döner ve kod çalışmayı durdurur

function yasiAyarla (_yas) {
  let yas = _yas;
  console.log(yas); // 30 döner
}

yasiAyarla(30);

console.log(yas); // undefined döner

for (let i = 0; i < 10; i++;) {
  console.log(i); // 0'dan 9'a kadar i ekrana basılır
}

console.log(i) // undefined döner

const

const keyword’ü de let gibi sadece tanımlandığı kapsam (block scope) içerisinden erişilebilir. const adından da anlaşılabileceği gibi (constant kelimesinin kısaltılmasıdır) sabittir.

• Sonradan değiştirilemez
• Aynı kapsam (scope) içerisinde sadece bir sefer tanımlanabilir. Tekrar tanımlanmaya çalıştığında kod hata verir ve çalışmayı durdurur

const isim = 'irfan';

console.log(isim); // "irfan" döner

isim = 'simsar'; // Uncaught TypeError: Assignment to constant variable. hatası döner ve kod çalışmayı durdurur.
{
  const soyisim = 'simsar';
  console.log(soyisim); // "simsar" döner
}

console.log(soyisim); // undefined döner

const kisi = {
  isim: 'irfan',
  soyisim: 'simsar',
  yas: 30
};

kisi = { 
  isim: 'irfan',
  soyisim: 'simsar',
  yas: 30
}; // Uncaught TypeError: Assignment to constant variable. hatası döner ve kod çalışmayı durdurur.

kisi.yas = 31;

console.log(kisi); // { isim: 'irfan', soyisim: 'simsar', yas: 31 } döner

const haftasonu = ['Cumartesi', 'Pazar'];

haftasonu = ['Cumartesi', 'Pazar', 'Pazartesi']; // Uncaught TypeError: Assignment to constant variable.

haftasonu.push('Pazartesi'); // Hata vermez (içten içe ne güzel olmaz mı der)

console.log(haftasonu) // ["Cumartesi", "Pazar", "Pazartesi"] döner

• Yukarıdaki örnekte de görüldüğü gibi eğer Object ve Array bu tiplerin mutable olmasından dolayı const keyword’ü ile tanımlansa da tamamen değiştirilememelerine rağmen özellikleri manipüle edilebilir. mutable ve unmutable tipler ile ilgili “İpin ucunu kaçırmamak” başlıklı yazı bu konu ile ilgili kafayı baya açıyor.

Hangi keyword’ü ne zaman kullanmalıyız?

Javascript uygulamanızın kapsamı büyüdükçe tanımlanan değişkenler daha sonra projede çalışan başkaları tarafından tekrar tanımlanmak istenebilir ve memory leak’e neden olabilir. let ve const keyword’leri bu kapsamda imdadımıza koşuyor. Değişkenlerin kapsamını ne kadar daraltırsak sızıntı da o ölçüde azalıyor.

Keywordlerin kullanımıyla ilgili farklı farklı görüşler olsa da bu konuda Mathias Bynens’in görüşü bana daha mantıklı geliyor.

• Mümkün olduğunca const kullan
• Sadece değişkenin değerini değiştirme ihtiyacın var ise let kullan
• Eğer ES6 yazıyorsan var kullanma