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ğerleriundefined
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)
// hiconsole.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);
// hellovar 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 durumReferenceError
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.