JavaScript Tanımlamada var, let ve const farkı

Javascript, gelen ECMAScript güncellemeleri, ilk defa sadece ön yüz için üretilmiş bir dilin veya kodlama yapısının; node.js ile birlikte arka yüzde de etkili bir şekilde kullanılabiliyor olması ile birlikte oldukça büyük bir ilgi gören bir “programlama dili” haline geldi. Bu gelişimin getirdiği yeniliklerden olan ve var ile değişken tanımlama özelliğinin yanına ES6 ile 2015’de aramıza katılan let ve const ile değişken tanımlama özelliği üstünden bir hayli zaman geçse bile yine de geliştiricilerin atladıkları ve önemsemedikleri noktalar olmuştur. Biz de bu yazıda var, let ve const farkı üzerinde detaylar vermek istiyoruz.

Öncelikle javascript tarihinin en fazla geçmişe sahip olan tanımlama operatörü “var” ile başlayalım.

3 adımda Javascript Promises Yapısı

Bir gelenek “var”

Her değişkeni Var ile tanımlamak, tüm geliştiricilerin zaaflarından birisidir. 2015 öncesinde bu kadar kapsama sahip olmayan Javascript, şu anda kendi yapısı gereği sadece bir değişken tanımlama operatörü ile tüm yapıyı en hatasız ve hızlı şekilde oluşturabileceğiniz niteliklere sahip değil. Bu yüzden gereken yerde diğer tanımlama operatörlerini de kullanmamız gerekmekte. Dilerseniz var, let ve const farkı konusunda açıklamalara üç ana başlıkta başlayalım.

Kapsam Alanı

var, genel anlamıyla global ve fonksiyonel kapsama alanına sahiptir. Bunu açmak gerekirse, var fonksiyon dışında tanımlandığında; sayfanızın her yerinde tanımlanmış durumda olur. Fonksiyon içinde tanımladığınız değişkenler ise sadece fonksiyon içerisinde kullanılabilmektedir.

var aos='Merhaba Dünya!';

var fonksiyon=() => {
console.log(aos);
}
fonksiyon();
//Çıktı: Merhaba Dünya

Ama fonksiyon içerisinde tanımladığımız değişken; fonksiyon içerisinde kullanılamaz.

var fonksiyon=() => {
var aos='Merhaba Dünya!';

}
fonksiyon();
document.write(aos);
//Çıktı: Uncaught ReferenceError: aos is not defined

Yeniden Tanımlamak ve Güncellenebilirlik

Var, diğer operatörlere göre oldukça rahattır fakat elbette bunun da dezavantajları da bulunmakta. Var, yeniden tanımlanabilir ve güncellenebilmektedir. İki durumda da herhangi bir sorun yaşamazsınız.

Yeniden tanımlanabilmektedir;

var aos="Merhaba Dünya!";
var aos="Güle Güle Dünya!";
console.log(aos);

//Çıktı: Güle Güle Dünya!

Güncellenebilmektedir;

var aos="Merhaba Dünya!";
aos="Güle Güle Dünya!";
console.log(aos);
//Çıktı: Güle Güle Dünya!

Tanımlama ve Kullanma Yeri

Var ile değişken tanımlarken, değişkeni kullanmadan önce tanımlamalısınız. Kullandıktan sonra tanımladığınızda, undefined hatasını alırsınız.

console.log(aos);
var aos="Merhaba Dünya!";
//Çıktı: undefined

let ile Tanımlamak

let, ES6 ile birlikte gelen değişken tanımlama operatörüdür.

Kapsam Alanı

let, global ve blok kapsam alanına sahiptir. Yani süslü parantezler içerisinde tanımlandıysa, sadece orada kullanılabilmektedir.

if(1>0) {
let aos="Merhaba Dünya!";

}
console.log(aos);
//Çıktı: Uncaught ReferenceError: aos is not defined

Yeniden Tanımlamak ve Güncellenebilirlik

let, farklı bloklar içerisinde tanımlanabilirken, aynı blok içerisinde yeniden tanımlanamamaktadır.

Farklı bloklar içerisinde yeniden tanımlanabilmektedir;

if(1>0) {
let aos="Merhaba Dünya!";
console.log(aos);
}
if(2>0) {
let aos="Güle Güle Dünya!";
console.log(aos);
}
//Çıktı: 
Merhaba Dünya!
Güle Güle Dünya!

Aynı blok içerisinde tanımlanamaz, yalnızca güncellenebilir;

if(1>0) {
let aos="Merhaba Dünya!";
let aos="Güle Güle Dünya!";
console.log(aos);
}
//Çıktı: Uncaught SyntaxError: Identifier 'aos' has already been declared

Güncellenebilmektedir;

if(1>0) {
let aos="Merhaba Dünya!";
aos="Güle Güle Dünya!";
console.log(aos);
}
//Çıktı: Güle Güle Dünya!

Tanımlama ve Kullanma Yeri

Kullandıktan sonra tanımlamak; Uncaught ReferenceError hatasını verecektir.

const ile Değişken Tanımlamak

const, ES6 ile birlikte gelen değişken tanımlama operatörüdür. const, diğerlerine göre daha basit ve daha az mantıksal hataya sebebiyet veren bir operatördür. Mantıksal hatalarda, zaten size yeniden tanımlandığına dair hataları belirtecektir.

Kapsam Alanı

const, let ile aynı şekilde global ve blok kapsam alanına sahiptir.

Yeniden Tanımlamak ve Güncellenebilirlik

const, hiçbir koşulda yeniden tanımlanamamakta ve güncellenememektedir.

const aos="Merhaba Dünya!";
const aos="Güle Güle Dünya!";
console.log(aos);
//Çıktı: Uncaught SyntaxError: Identifier 'aos' has already been declared

Güncellenememektedir;

const aos="Merhaba Dünya!";
aos="Güle Güle Dünya!";
console.log(aos);
//Çıktı: Uncaught TypeError: Assignment to constant variable.

Tanımlama ve Kullanma Yeri

const, bu durumda let ile aynı tepkiyi vermektedir.

Genel anlamda var, let ve const farkı bunlardan ibarettir. 3 operatöründe, kendi kullanım alanları mevcuttur. Örneğin, bir değişkeni yeniden asla tanımlamayacaksanız ve güncellemeyecekseniz const ile tanımlayabilirken, sadece güncelleyebilmek isterseniz let’i tercih edebilirsiniz. var ile ise her türlü değişimi ve tanımlamayı yapabilirsiniz. Aslında, ES6 ile 2 türün daha gelmesini sağlayan temel etmen bu. Diğer kapsama alanı özellikleri de geliştiricilerin tercih alanını arttıran seçenekler arasında.

Bu yazımızda, Javascript’de değişken tanımlama konusunda var, let ve const farkı başlığını inceledik. Umarız, kafanızda farklar daha net bir şekilde oturmuştur. Bundan böyle haftalık okumalık içeriklerimizi size sunacağız. Ayrıca her sayfa yenilendiğinde değişen yazı ve resim adlı içeriğimize de göz atabilirsiniz.

Kullandığımız kaynaklar:

https://dev.to/sarah_chima/var-let-and-const–whats-the-difference-69e

https://codeburst.io/const-let-and-var-which-and-when-541a2721c18