blog posts

JavaScript’te Let nedir?

ES2015/ES6’dan önce JavaScript‘te yalnızca iki tür değişken kapsamı vardı: Global Kapsam ve İşlev Kapsamı. “var” anahtar sözcüğüyle bildirilen değişkenler işlev kapsamlıdır; yani, içinde bildirildikleri işlevin genel kapsamı boyunca veya herhangi bir işlevin dışında bildirildiğinde erişilebilirler. Aşağıda bir değişken bildirmek için JavaScript’teki Let anahtar sözcüğünün sözdizimi verilmiştir:

let variable_name;

Let anahtar sözcüğü blok kapsamını tanıttı; bu, let ile bildirilen değişkenlerin tanımlandıkları blokla sınırlı olduğu anlamına gelir. Blok, “{}” parantezleri içine yazılan herhangi bir koddur. Aşağıdaki örnekte bir blok muhafazası gösterilmektedir:

{

  let x = 10;

  console.log(x); // 10

}

console.log(x); // ReferenceError: x is not defined

Yukarıdaki örnekte “x” değişkeni bir bloğun içinde “let” ile bildirilir ve yalnızca o bloktan erişilebilir. Bloğun dışında, “x”e erişme girişimi “ReferenceError” ile sonuçlanır. “let” anahtar sözcüğü, değişkenin kapsamı üzerinde daha hassas kontrol sağlar ve “var” kullanılarak bildirilen değişkenlerle ilişkili, değişkenin yanlışlıkla yükseltilmesi (Hiosting) veya değişkenlerin genel kapsama sızması gibi yaygın sorunların önlenmesine yardımcı olur. Genel olarak, JavaScript’teki let anahtar sözcüğü, blok kapsamına sahip değişkenleri bildirmek için kullanılır ve bunun kullanılması, bunların tanımlandıkları blokla sınırlı olmasını sağlar.

Let in JavaScript örnekleri

Bu bölümde bu kavramın daha iyi anlaşılabilmesi için JavaScript’teki Let anahtar sözcüğünün bazı örnekleri verilmiştir. Verilen örneklerin her biri Javascript’teki Let anahtar sözcüğü etrafındaki belirli bir kavramla ilgilidir ve anlaşılması çok önemlidir.

Örnek 1. Ülke çapındaki ürün yelpazesi

Aşağıdaki örnek, kod parçası aşağıdaki gibi olan JavaScript’teki global aralık veya etki alanına ilişkin anlayışımı ifade etmektedir:

<script>

let x = 20;

document.write("Outside the function x = " + x);


function show() {

    document.write("<br> Inside the function x = " + x);

}

show();

</script>

Yukarıdaki örneğin konsoldaki çıktısı aşağıdaki gibidir:

Bu örnekte, let anahtar sözcüğünü kullanarak global kapsamda bir x değişkeni bildiriyoruz. X değişkenine betiğin herhangi bir yerinden erişilebilir. show() fonksiyonunu çağırdığımızda, document.write() yöntemini kullanarak x’in değerini fonksiyonun hem dışında hem de içinde görüntüler. X global kapsamda tanımlandığı için fonksiyonun dışından ve içinden sorunsuz bir şekilde erişilebilir.

Örnek 2. Fonksiyonel aralık

JavaScript’teki kapsam işlevi veya işlev aralığı da JavaScript’teki let anahtar sözcüğüyle ilgili kavramlardan biridir, bu kavramı anlamak için aşağıdaki örnek ve açıklaması verilmiştir:

<script>

function show() {

    let num = 15;

    document.write("Inside the function num = " + num);

}

show();

document.write("<br> Outside the function num = " + num);

</script>

Bu örnekte, show() işlevindeki let anahtar sözcüğünü kullanarak bir num değişkeni bildiriyoruz. Num değişkeni işlev kapsamına alınmıştır, yani ona yalnızca işlevin içinden erişilebilmektedir. show() fonksiyonunu çağırdığımızda, document.write() yöntemini kullanarak num değerini görüntüler. Ancak num değişkenine fonksiyon dışından erişmeye çalıştığımızda num dış kapsamda tanımlanmadığı için hata veriyor. Bu örneğin çıktısı aşağıdaki gibi olacaktır:

Ayrıca bu örnekte kodu çalıştırıp konsol çıktısını kontrol ederseniz aşağıdaki hatayı alırsınız:

Uncaught ReferenceError: num is not defined

Hata mesajı, num değişkeninin dış kapsamda tanımlanmaması nedeniyle bir ReferenceError olduğunu gösterir. Bu hata, bildirilmemiş veya kapsam dışında olan bir değişkene erişmeye çalıştığımızda ortaya çıkar.

document.write(“<br> Outside the function num = ” + num); satırı, show() işlevi dışındaki num değişkenine erişmeye çalışıyor, ancak num, let anahtar sözcüğü bildirilen işlevin içinde olduğundan, yalnızca içinden erişilebilir. işlevin kapsamı. Sonuç olarak num fonksiyonu dışından erişim sağlanmaya çalışıldığında hata oluşuyor ve ikinci ifade yazdırılmıyor.

Belge yüklendikten sonra kullanıldığında tüm belgenin üzerine yazılabileceğinden, çıktıyı görüntülemek için document.write() işlevinin kullanılmasının genellikle tavsiye edilmediğini lütfen unutmayın. Gerçek dünya senaryolarında genellikle DOM’u değiştirmek veya çıktıyı görüntülemek için konsolda oturum açmak gibi başka yöntemler kullanırız.

Örnek 3. Blok aralığı

JavaScript’te let anahtar sözcüğü kavramıyla bağlantılı olarak çok önemli olan bir diğer alan ise aşağıdaki örnek şeklinde anlatılacak olan kapsam bloğudur.

<script>

{

    let num = 30;

    document.write("Inside the block num = " + num);

}

document.write("<br> Outside the block num = " + num);

</script>

Bu örnekte, JavaScript’te let anahtar sözcüğünü kullanarak bir bloğun içinde num değişkenini bildiriyoruz. Num değişkeni blok kapsamlıdır, yani yalnızca tanımlandığı blok içerisinden erişilebilir. Bloğun içinde num değerini “num bloğunun içinde = 30” olarak görüntülemek için document.write() işlevini kullanırız. Ancak num bloğunun dışından erişmeye çalıştığımızda num dış kapsamda tanımlanmadığı için hata veriyor.

Bloğun dışındaki ikinci document.write() ifadesi num değerini göstermiyor çünkü bu kapsamda erişilebilir değil ve aşağıdaki hatayı veriyor:

UncaughtReferenceError: num is not defined

Gördüğünüz gibi num değeri bloğun içinde doğru bir şekilde görüntüleniyor ancak blok dışından erişmeye çalıştığımızda ReferenceError ile sonuçlanıyor çünkü num yalnızca blok kapsamı içinde tanımlanıyor.

Örnek 4. Farklı bloklarda değişken yeniden bildirimi

Değişkeni farklı bloklarda bildirmek için aşağıdaki örnek verilmiştir:

<script>

let num = 23;

{

    let num = 15;

    document.write("num inside the block = " + num);

}

let num = 89;

document.write("<br> num outside the block = " + num);

</script>

Yukarıdaki kodu çalıştırırken, let değişkeni kullanılarak yeniden bildirime izin verilmediğinden bu bir hata verir; Bu nedenle tarayıcıda herhangi bir çıktı görüntülemez.

Konsol çıktısını görüyorsanız bu, bu programı çalıştırırken oluşan hatayı gösterir.

SyntaxError: redeclaration of let x

note: Previously declared at line 2, column 5

Hata mesajı, num değişkeni yeniden bildirildiğinden bir SyntaxError olduğunu gösterir. JavaScript’teki let anahtar sözcüğü, blok kapsamına sahip bir değişken bildirmemize olanak tanır, ancak aynı değişken adının aynı kapsam içinde bildirilmesine izin vermez. Sağlanan kodda, let anahtar sözcüğünü kullanan iki num bildirimimiz var. İlk bildirim bloğun dışında, ikinci bildirim ise bloğun içindedir. Ancak her iki bildirim de aynı değişken adına sahip olduğundan sözdizimi hatasıyla sonuçlanır.

Sonuç olarak, tarayıcıda hiçbir çıktı görüntülenmez ve konsol, değişkenin belirli bir satır ve sütunda zaten bildirildiğini belirten bir notla birlikte bir sözdizimi hatası görüntüler. Bu sorunu çözmek için aynı kapsamdaki değişkenleri bildirirken benzersiz değişken adları kullandığınızdan emin olun.

JavaScript’te Var ve Let anahtar kelimeleri arasındaki fark

Let ve var anahtar kelimeleri arasındaki temel fark kapsamlarında yatmaktadır. Var anahtar sözcüğünün global bir kapsamı vardır, let anahtar sözcüğünün ise bir blok kapsamı vardır. Bu farkı anlamak için aşağıdaki örnekleri göz önünde bulundurun:

Örnek 1: Küresel kapsam:

var x = 10;

let y = 20;

function example() {

  console.log(x); // 10

  console.log(y); // 20

}

example();

console.log(x); // 10

console.log(y); // ReferenceError: y is not defined

Bu örnekte, var anahtar sözcüğünü kullanarak bir x değişkenini ve let anahtar sözcüğünü kullanarak bir y değişkenini bildiriyoruz. var x değişkeninin genel bir kapsamı vardır, dolayısıyla ona komut dosyasındaki herhangi bir yerden erişilebilir. Bununla birlikte, let y değişkeni blok kapsamlıdır ve yalnızca tanımlandığı blok içerisinden erişilebilir; Bu nedenle, bloğun dışından y’ye erişmeye çalışmak ReferenceError ile sonuçlanacaktır.

Örnek 2: Blok Kapsamı:

function example() {

  var x = 10;

  let y = 20;

  if (true) {

    var x = 30;

    let y = 40;

    console.log(x); // 30

    console.log(y); // 40

  }

  console.log(x); // 30

  console.log(y); // 20

}

example();

Bu örnekte, example() işlevinde var anahtar sözcüğünü kullanarak bir x değişkenini ve let anahtar sözcüğünü kullanarak bir y değişkenini bildiriyoruz. If ifade bloğunun içinde, var kullanarak x’i ve let kullanarak y’yi yeniden bildiririz. Var’ın bir işlev kapsamı olduğundan, bloğun içindeki x’in yeniden bildirilmesi, bloğun dışındaki x’in değerini de etkiler. Öte yandan, let y değişkeninin blok kapsamı vardır, bu nedenle onu bloğun içinde yeniden bildirmek, y’nin bloğun dışındaki değerini etkilemez. Özetle, let ve var arasındaki temel farklar şunlardır:

• let in JavaScript’in bir blok kapsamı vardır ve diğer yandan var’ın bir işlev kapsamı vardır.
• var değişkenleri aynı kapsam içinde yeniden bildirilebilirken let değişkenleri bir blok içinde yeniden bildirilemez.

Bu farklılıkları anlamak, değişkenlerinizin kapsamına ve davranışına göre doğru anahtar kelimeyi seçerek daha sağlam ve öngörülebilir kod yazmanıza yardımcı olabilir.

var let const fark

Özetle, JavaScript’te var, let ve const arasındaki farklar şunlardır:

• var işlevsel olarak kapsamlandırılmıştır ve yeniden bildirilebilir ve yeniden atanabilir.
• blok kapsamına alınsın, aynı blokta yeniden bildirilemez ancak yeniden atanabilir.
• const blok kapsamlıdır, yeniden bildirilemez veya yeniden atanamaz. Salt okunur bir değişken oluşturur.
• var değişkenleri HIosting’tir, let ve const değişkenleri ise değildir.
• var değişkenleri bildirilmeden önce (dolayısıyla tanımsız) kullanılabilir hale getirilebilirken, let ve const değişkenlerinin ölü zaman dilimi vardır.
• var, bir işlevin dışında bildirilirse genel olarak kapsam dahilindedir, halbuki let ve const böyle değildir.
• Daha katı kapsam kuralları ve daha iyi kod okunabilirliği nedeniyle var yerine let ve const tercih edilir.
• Yeniden atanmaması gereken değerler için const kullanın ve yeniden atanması gereken değerlere izin verin.

Bu farklılıklar, geliştiricilerin kendi değişken kapsamlarına ve değişkenlik gereksinimlerine göre daha öngörülebilir ve sürdürülebilir kod yazmalarına yardımcı olur.

Önemli not: JavaScript’te kaldırma, değişken ve işlev bildirimlerinin derleme zamanında ilgili kapsamların üzerine taşındığı bir davranıştır. Basitçe söylemek gerekirse Kaldırma, değişkenleri ve işlevleri kodunuzda tanımlanmadan önce kullanabileceğiniz anlamına gelir. Ancak başlatmalar veya atamalar değil, yalnızca bildirimler oluşturulur. Beklenmeyen davranışlardan kaçınmak için Hoisting’in farkında olmak önemlidir ve kod netliğini geliştirmek için değişkenleri ve işlevleri kullanmadan önce bildirmek en iyisidir.

son söz

JavaScript’teki let anahtar sözcüğü, değişkenlerin kapsam açısından tanımlandıkları blokla sınırlandırılmasına olanak tanıyan blok kapsamını sunar. Bu, değişken ömrü üzerinde daha iyi kontrol sağlar ve adlandırma çakışmaları veya istenmeyen değişiklik riskini azaltır. Let anahtar sözcüğü hakkında hatırlanması gereken önemli noktalar şunlardır:

• bloğun kapsamını tanıtalım.
• let, değişkenlerin tanımlandıkları bloğa erişimini kısıtlar.
• let in JavaScript değişkenleri kapsamının en üstüne çıkarmaz.
• let değişkenlerin bir blok içinde yeniden bildirilmesini engeller.
• Let in Javascript en iyi uygulamaları teşvik eder ve kod okunabilirliğini artırır.