⚠️ Bahaya Tersembunyi Menggunakan `var` dalam JavaScript: Mengapa Tiba Masanya untuk Bergerak

Kata kunci var telah menjadi cara lalai untuk mengisytiharkan pembolehubah dalam JavaScript selama bertahun-tahun. Walau bagaimanapun, ia mempunyai beberapa keanehan dan perangkap yang boleh membawa kepada tingkah laku yang tidak dijangka dalam kod anda. Alternatif moden seperti let dan const menyelesaikan banyak masalah ini, menjadikannya pilihan pilihan untuk mengisytiharkan pembolehubah dalam kebanyakan kes.

1️⃣ Pengangkatan: var Mengisytiharkan Pembolehubah Sebelum Anda Tahu!

? Penjelasan:

Dalam JavaScript, pengisytiharan var dinaikkan ke bahagian atas skopnya, bermakna ia dimulakan sebagai tidak ditentukan walaupun pengisytiharan muncul kemudian dalam kod. Ini boleh menyebabkan tingkah laku mengelirukan dan membawa kepada pepijat yang sukar dikesan.

? Perkara Utama:

• ? Angkat dalam Tindakan: Pengisytiharan berubah-ubah dialihkan ke bahagian atas skop, tetapi tugasan mereka tidak.
• ? Nilai Tidak Ditakrifkan Yang Tidak Dijangka: Pembolehubah boleh digunakan sebelum ia diberikan nilai, yang membawa kepada hasil yang tidak ditakrifkan yang tidak diingini.

? Contoh:

console.log(myVar);  // undefined (hoisted but not initialized)
var myVar = 10;
console.log(myVar);  // 10

? Komen: Pembolehubah myVar dinaikkan ke bahagian atas skop tetapi pada mulanya tidak ditentukan, yang boleh menyebabkan kekeliruan dalam kod anda.

? Betulkan:

• ? Gunakan let atau const: Kata kunci ini tidak dinaikkan dengan cara yang sama seperti var, yang membantu mengelakkan isu ini.

? Contoh Pembetulan:

console.log(myLet);  // ReferenceError: myLet is not defined
let myLet = 10;
console.log(myLet);  // 10

? Komen: Menggunakan let menghalang pembolehubah daripada diakses sebelum ia diisytiharkan, mengurangkan kekeliruan dan potensi pepijat.

2️⃣ Skop Fungsi lwn. Skop Blok: var Boleh Bocor Keluar dari Blok!

? Penjelasan:

Salah satu kelemahan utama var ialah ia berskop fungsi, bukan berskop blok. Ini bermakna pembolehubah yang diisytiharkan dalam gelung, jika penyataan atau blok lain tidak terhad kepada blok itu, tetapi boleh diakses di luarnya, yang boleh membawa kepada pepijat.

? Perkara Utama:

• ? Skop Fungsi: var diskop kepada fungsi terdekat, walaupun diisytiharkan di dalam blok seperti gelung atau pernyataan if.
• ? Pembolehubah Bocor: Ini boleh menyebabkan pembolehubah secara tidak sengaja bocor keluar dari blok, menyebabkan tingkah laku yang tidak dapat diramalkan.

? Contoh:

if (true) {
  var blockVar = "I’m accessible outside this block";
}
console.log(blockVar);  // "I’m accessible outside this block"

? Komen: Walaupun blockVar telah diisytiharkan di dalam blok if, ia masih boleh diakses di luar blok kerana var adalah skop fungsi, bukan skop blok.

? Betulkan:

• ? Gunakan let atau const: Kata kunci ini adalah skop blok, bermakna ia hanya boleh diakses dalam blok yang ditakrifkan.

? Contoh Pembetulan:

if (true) {
  let blockLet = "I’m only accessible inside this block";
}
console.log(blockLet);  // ReferenceError: blockLet is not defined

? Komen: Menggunakan let atau const memastikan pembolehubah kekal terhad pada blok masing-masing, mengelakkan kebocoran skop.

3️⃣ Isu Pengisytiharan Semula: var Membolehkan Anda Mengisytiharkan Pembolehubah Yang Sama Dua Kali!

? Penjelasan:

Dengan var, anda secara tidak sengaja boleh mengisytiharkan semula pembolehubah yang sama dalam skop yang sama, yang boleh menimpa nilai sebelumnya. Ini boleh membawa kepada pepijat yang tidak disengajakan, terutamanya dalam pangkalan kod yang lebih besar di mana nama pembolehubah mungkin digunakan semula secara tidak sengaja.

? Perkara Utama:

• ? Mengisytiharkan Semula Pembolehubah: var membenarkan anda mengisytiharkan semula pembolehubah dalam skop yang sama, yang berpotensi menimpa nilai sedia ada.
• ? Tulis Ganti Yang Tidak Diinginkan: Ini boleh menyebabkan pepijat yang sukar dikesan, terutamanya dalam fungsi yang besar atau kompleks.

? Contoh:

var name = "Alice";
var name = "Bob";  // No error, overwrites the previous value
console.log(name);  // "Bob"

? Komen: Pengisytiharan nama kedua menimpa yang pertama, yang berpotensi menyebabkan pepijat dalam kod.

? Betulkan:

• ? Gunakan let atau const: Kata kunci ini menghalang anda daripada mengisytiharkan semula pembolehubah dalam skop yang sama, mengurangkan risiko tulis ganti yang tidak diingini.

? Contoh Pembetulan:

let name = "Alice";
let name = "Bob";  // SyntaxError: Identifier 'name' has already been declared

? Komen: Menggunakan let atau const membantu anda mengelakkan pengisytiharan semula pembolehubah dan memastikan kod anda kekal boleh diramal.

4️⃣ var dalam Gelung: Berpotensi untuk Pepijat dalam Kod Asynchronous

? Penjelasan:

Apabila menggunakan var dalam gelung, nilai pembolehubah boleh berubah dalam cara yang tidak dijangka, terutamanya apabila bekerja dengan kod tak segerak. Memandangkan var adalah skop fungsi dan bukan skop blok, pemboleh ubah gelung mungkin memegang nilai yang tidak dijangka apabila diakses dalam panggilan balik tak segerak.

? Perkara Utama:

• ? Loop Variables: Variables declared with var inside loops are not confined to the loop block, leading to potential bugs when accessed later.
• ⏳ Asynchronous Issues: This can cause bugs in asynchronous operations like setTimeout or promises, where the loop variable might have an unexpected value.

? Example:

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);  // Prints: 3, 3, 3 (unexpected)
}

? Comment: Because var is not block-scoped, the loop variable i is shared across all iterations, and its final value (3) is used in each setTimeout callback.

? Fix:

• ⛓ Use let: The let keyword is block-scoped, ensuring that each iteration of the loop gets its own independent value of the loop variable.

? Example Fix:

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);  // Prints: 0, 1, 2 (as expected)
}

? Comment: Using let creates a new instance of i for each iteration, fixing the asynchronous callback issue and ensuring the correct values are printed.

5️⃣ var and Closures: A Source of Confusion

? Explanation:

Closures can lead to unexpected behavior when combined with var. Since var is function-scoped, its value might change in ways that are not expected when a closure captures it.

? Key Points:

• ? Closures in JavaScript: A closure is a function that remembers its surrounding scope even after the outer function has finished executing.
• ? Shared Variable Issues: When var is used inside a closure, the captured variable might be shared across all closures, leading to unexpected behavior.

? Example:

function createFunctions() {
  var funcs = [];
  for (var i = 0; i < 3; i++) {
    funcs.push(function() {
      console.log(i);
    });
  }
  return funcs;
}

var myFuncs = createFunctions();
myFuncs[0]();  // 3 (unexpected)
myFuncs[1]();  // 3 (unexpected)
myFuncs[2]();  // 3 (unexpected)

? Comment: All closures are capturing the same i value because var is function-scoped, leading to unexpected results.

? Fix:

• ? Use let: By using let, each closure captures a new instance of the loop variable, solving the problem.

? Example Fix:

function createFunctions() {
  var funcs = [];
  for (let i = 0; i < 3; i++) {
    funcs.push(function() {
      console.log(i);
    });
  }
  return funcs;
}

var myFuncs = createFunctions();
myFuncs[0]();  // 0
myFuncs[1]();  // 1
myFuncs[2]();  // 2

? Comment: With let, each closure gets its own copy of i, fixing the issue and ensuring the expected values are printed.

? Conclusion: Time to Say Goodbye to var

While var was the original way to declare variables in JavaScript, it has several shortcomings that make it a poor choice in modern JavaScript development. The introduction of let and const provides better scoping, reduces the risk of bugs, and makes your code more predictable. To write cleaner and more maintainable JavaScript, it's time to move on from var and embrace let and const.

Atas ialah kandungan terperinci ⚠️ Bahaya Tersembunyi Menggunakan `var` dalam JavaScript: Mengapa Tiba Masanya untuk Bergerak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!