var, let, ve const Nedir? Örneklerle Açıklama

JavaScript’te değişkenler, kodunuzun farklı yerlerinde değerleri saklamak ve yönetmek için kullanılır. Ancak, değişkenleri tanımlarken hangi anahtar kelimenin kullanılacağı, kodunuzun nasıl çalışacağını etkileyebilir. Bu yazıda, var, let, ve const anahtar kelimelerinin farklarını ve nasıl kullanıldıklarını örneklerle açıklayacağım.

Aşağıda kullanılan bazı terimlerin açıklamalarını yaparak başlayalım.

Scope: Değişken, fonksiyon ve objeleri içeren kod bloğu.

Global Scope: Global Scope içerisindeki değişkenlere, her yerden erişilebilir ve değiştirilebilir.

Function Scope: Tanımlandığı fonksiyon içerisinden erişilebilir.

Block Statement: if, switch koşulları ve for, while döngüleri parantezleri içerisinden erişilir.

'var'

var, JavaScript'teki en eski değişken tanımlama yöntemidir ve bazı önemli sınırlamaları vardır:

• Fonksiyon Kapsamı: var değişkenleri yalnızca tanımlandıkları fonksiyon içinde geçerlidir.
• Hoisting: var değişkenleri, tanımlanmadan önce erişilebilir, ancak bu durumda değerleri undefined olur.

function exampleHoisting() {   
  console.log(x); // undefined   
  var x = 12;   
  console.log(x); // 12 
}

var hi = 'hi';
function sayHi(){
  var hello = 'hello';
}

• Yukarıdaki örnekteki, hi değişkeni, fonksiyon dışarısında tanımlandığından global scope olurken, hello değişkeni ise fonksiyon scope’tur. Yani fonksiyon dışarısından erişmeye çalıştığımızda aşağıdaki gibi hata alırız.

var hi = 'hi';
function sayHi(){
  var hello = 'hello';
}
console.log(hi) 
// hi
console.log(hello) 
// ReferenceError: hello is not defined

• var tanımlı değişkenlere fonksiyonun gövdesi içindeki diğer fonksiyonlardan da erişilebilir.

function getDate (){
  var date = new Date();
  
  function dateToString() {
    return date.toDateString()
  }
  
  return dateToString();
  
}
getDate();
// "Mon Nov 02 2020"

• var; tekrar tanımlanabilir ve atanan değeri güncellenebilir.

Tekrar tanımlama örneği:

var newVariable = 'hello';
console.log (newVariable);
// hello
var newVariable = 'hi';
console.log(newVariable);
// hi

Atanan değeri güncelleme örneği;

var newVariable = 'hello';
    newVariable = 'hi, again'
console.log(newVariable);
// hi, again

'let'

let, ES6 ile birlikte gelen bir değişken tanımlama yöntemidir ve var'a göre bazı avantajlar sağlar:

• Blok Kapsamı: let değişkenleri yalnızca tanımlandıkları blok içinde geçerlidir.
• Hoisting: let değişkenleri, tanımlanmadan önce erişilemez ve bu durum ReferenceError ile sonuçlanır.

let varX = 'hello;
if (varX === 'hello') {
  let varX = 'hi';
console.log(varX);
// expected output: hi
}
console.log(sayHi);
// hello

• Let, tekrar tanımlanamaz fakat değeri güncellenebilir.

Değer güncelleme;

let greeting = 'hello';
    greeting = 'hi, again';
console.log(greeting);
// hi, again

Tekrar Tanımlama;

let greeting = 'hello';
let greeting = 'hi, again';
console.log(greeting);
// Uncaught SyntaxError: Identifier 'greeting' has already been declared

let block scope olduğundan, aynı isimle tekrar tanımlama yapılamayacağı ve daha önce tanımlı bir değişkeni ezemeyeceğinden var’a göre daha güvenlidir.

'const'

• Const’ta let gibi block scope’tur.
• Sabit tanımlanırken kullanılır.
• Sonradan değiştirilemez, yeniden tanımlanamaz.
• Değişken tanımlandığında, atama yapılması gereklidir. (Daha sonra değiştirilemeyeceği ve atama yapılamayacağı için mantıklıdır.)

const newVariable;
const türündeki değişkeni tanımladığımızda atama yapmadığımız zaman,
// Missing initializer in const declaration 
hatası alırız.

• const ile tanımlı nesneler yeniden tanımlanamaz fakat özellikleri için bu geçerli değildir. Aşağıdaki şekilde nesneye tanımlı özelliğinin değerini güncelleyebiliriz.

const greeting  = {
   message: "Hello",
   times: 4
}
greeting.message = "Hi, again"
// "Hi, again"

• const tipindeki array’a yeni eleman ekleyebiliriz fakat yeniden tanımlama yapamayız.

const arr = [1, 2, 3];
      arr.push(4);
console.log(arr);
// [1,2,3,4]

yeniden tanımladığımızda “:Identifier ‘arr2’ has already been declared” hatası alırız.

const arr2 = [1, 2, 3];
const arr2 = [1,2,3,4];
console.log(arr2);
// Identifier 'arr2' has already been declared hatası alırız.

• const tipindeki bir object’e yeni bir değer ekleyebiliriz.

const obj = {
    key1 : 'value1'
}
obj.key2 = 'value2'
console.log(obj)
// {key1: "value1", key2: "value2"}

fakat const tipindeki object’i yeniden tanımlayamayız.

const obj = {
    key1 : 'value1'
}
const obj = {
    key2 : 'value2'
}
//Uncaught SyntaxError: Identifier 'obj' has already been declared hatası alırız.

Sonuç:

• var: Eski yöntem, fonksiyon kapsamlı ve hoisting etkisi vardır.
• let: Modern yöntem, blok kapsamlı ve Temporal Dead Zone (TDZ)* etkisi vardır.
• const: Sabit değerler için kullanılır, blok kapsamlıdır ve değiştirilemez.

Doğru değişken tanımlama yöntemini seçmek, kodunuzun okunabilirliğini ve hatalardan kaçınmanızı sağlar.

*Temporal Dead Zone (TDZ): TDZ, bir değişkenin tanımlanmadan önce erişilemez olduğu bir bölgeyi ifade eder. Bu, özellikle değişkenler blok kapsamlı (block-scoped) olduğunda önemlidir.

Herhangi bir sorunuz yada anlamadığınız yer varsa yorum bırakırsanız geri dönüş sağlarım. Zaman ayırıp okuduğunuz için teşekkür ederim.

Kaynaklar:
1- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
2- https://www.youtube.com/watch?v=kRknZ6ejQ_8&t=251s

const

3- https://scotch.io/tutorials/understanding-scope-in-javascript