Var, Let, dan Const - Apa Perbezaannya?

Banyak ciri baru yang berkilat muncul dengan ES2015 (ES6). Dan sekarang, sejak tahun 2020, diandaikan bahawa banyak pembangun JavaScript sudah biasa dan mula menggunakan ciri-ciri ini.

Walaupun anggapan ini sebahagiannya benar, masih ada kemungkinan bahawa beberapa ciri ini tetap menjadi misteri bagi beberapa pemikir.

Salah satu ciri yang disertakan dengan ES6 adalah penambahan letdan const, yang dapat digunakan untuk deklarasi berubah-ubah. Persoalannya adalah, apa yang membuat mereka berbeza dengan baik varyang telah kita gunakan? Sekiranya anda masih belum jelas mengenai perkara ini, maka artikel ini sesuai untuk anda.

Dalam artikel ini, kita akan membincangkan var, letdan const  berkenaan dengan skop, penggunaan, dan pengangkatan mereka. Semasa anda membaca, perhatikan perbezaan di antara mereka yang akan saya tunjukkan.

Var

Sebelum munculnya ES6, vardeklarasi memerintah. Terdapat masalah yang berkaitan dengan pemboleh ubah yang dinyatakan var. Itulah sebabnya mengapa perlu cara baru untuk menyatakan pemboleh ubah muncul. Pertama, mari kita varlebih memahami sebelum kita membincangkan isu-isu tersebut.

Skop var

Skop pada dasarnya bermaksud di mana pemboleh ubah ini tersedia untuk digunakan. vardeklarasi dilingkupi secara global atau berfungsi / dikuasai secara tempatan

Skopnya global apabila varpemboleh ubah dinyatakan di luar fungsi. Ini bermaksud bahawa sebarang pemboleh ubah yang dinyatakan vardi luar blok fungsi tersedia untuk digunakan di seluruh tetingkap.

varadalah fungsi lingkup ketika dinyatakan dalam fungsi. Ini bermaksud bahawa ia tersedia dan hanya dapat diakses dalam fungsi tersebut.

Untuk memahami lebih lanjut, lihat contoh di bawah.

 var greeter = "hey hi"; function newFunction() { var hello = "hello"; } 

Di sini, greeterscoped secara global kerana terdapat di luar fungsi sementara hellofungsi scoped. Oleh itu, kita tidak dapat mengakses pemboleh ubah hellodi luar fungsi. Oleh itu, jika kita melakukan ini:

 var tester = "hey hi"; function newFunction() { var hello = "hello"; } console.log(hello); // error: hello is not defined 

Kami akan mendapat ralat kerana hellotidak terdapat di luar fungsi.

pemboleh ubah var dapat dinyatakan semula dan dikemas kini

Ini bermaksud bahawa kita dapat melakukan ini dalam ruang lingkup yang sama dan tidak akan mendapat kesalahan.

 var greeter = "hey hi"; var greeter = "say Hello instead"; 

dan ini juga

 var greeter = "hey hi"; greeter = "say Hello instead"; 

Pengangkatan var

Mengangkat adalah mekanisme JavaScript di mana pemboleh ubah dan deklarasi fungsi dipindahkan ke bahagian atas skopnya sebelum pelaksanaan kod. Ini bermaksud sekiranya kita melakukan ini:

 console.log (greeter); var greeter = "say hello" 

ia ditafsirkan sebagai berikut:

 var greeter; console.log(greeter); // greeter is undefined greeter = "say hello" 

Oleh itu, varpemboleh ubah dilambung ke bahagian atas skopnya dan dimulakan dengan nilai undefined.

Masalah dengan var

Terdapat kelemahan yang timbul   var. Saya akan menggunakan contoh di bawah untuk menerangkan:

 var greeter = "hey hi"; var times = 4; if (times > 3) { var greeter = "say Hello instead"; } console.log(greeter) // "say Hello instead" 

Oleh itu, kerana times > 3kembali benar, greeterditakrifkan semula kepada "say Hello instead". Walaupun ini tidak menjadi masalah jika anda sengaja ingin greeterditakrifkan semula, ia menjadi masalah apabila anda tidak menyedari bahawa pemboleh ubah greetertelah ditentukan sebelumnya.

Sekiranya anda telah menggunakan greeterbahagian lain dari kod anda, anda mungkin akan terkejut dengan output yang anda dapat. Ini mungkin akan menyebabkan banyak bug dalam kod anda. Inilah sebabnya letdan constperlu.

Biarkan

letkini lebih disukai untuk pengisytiharan berubah. Ia tidak menghairankan kerana ia merupakan peningkatan vardeklarasi. Ini juga dapat menyelesaikan masalah dengan perkara varyang baru kita laksanakan. Mari kita pertimbangkan mengapa ini berlaku.

let is block scoped

Blok adalah sekumpulan kod yang dibatasi oleh {}. Sebuah blok tinggal di pendakap kerinting. Apa-apa dalam pendakap kerinting adalah blok.

Jadi pemboleh ubah yang dinyatakan dalam blok dengan let  hanya tersedia untuk digunakan dalam blok tersebut. Izinkan saya menerangkannya dengan contoh:

 let greeting = "say Hi"; let times = 4; if (times > 3) { let hello = "say Hello instead"; console.log(hello);// "say Hello instead" } console.log(hello) // hello is not defined 

Kami melihat bahawa menggunakan helloluar bloknya (pendakap keriting di mana ia ditentukan) mengembalikan ralat. Ini kerana letpemboleh ubah adalah blok lingkup.

biarkan boleh dikemas kini tetapi tidak diisytiharkan semula.

Sama seperti var, pemboleh ubah yang dinyatakan letdapat diperbaharui dalam skopnya. Tidak seperti var, letpemboleh ubah tidak dapat dinyatakan semula dalam ruang lingkupnya. Jadi sementara ini akan berfungsi:

 let greeting = "say Hi"; greeting = "say Hello instead"; 

ini akan mengembalikan ralat:

 let greeting = "say Hi"; let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared 

Namun, jika pemboleh ubah yang sama ditentukan dalam ruang lingkup yang berbeza, tidak akan ada kesalahan:

 let greeting = "say Hi"; if (true) { let greeting = "say Hello instead"; console.log(greeting); // "say Hello instead" } console.log(greeting); // "say Hi" 

Mengapa tidak ada ralat? Ini kerana kedua-dua keadaan dianggap sebagai pemboleh ubah yang berbeza kerana mereka mempunyai ruang lingkup yang berbeza.

Fakta ini membuat letpilihan yang lebih baik daripada var. Semasa menggunakan let, anda tidak perlu repot jika sebelumnya anda telah menggunakan nama untuk pemboleh ubah kerana pemboleh ubah hanya ada dalam ruang lingkupnya.

Juga, kerana pemboleh ubah tidak dapat dinyatakan lebih dari sekali dalam ruang lingkup, maka masalah yang dibahas sebelumnya yang terjadi vartidak akan terjadi.

Mengangkat let

Sama seperti   var, letdeklarasi dilambung ke puncak. Tidak seperti varyang diinisialisasi sebagai undefined, letkata kunci tidak diinisialisasi. Oleh itu, jika anda cuba menggunakan letpemboleh ubah sebelum perisytiharan, anda akan mendapat Reference Error.

Konst

Pemboleh ubah dinyatakan dengan constmengekalkan nilai tetap. constdeklarasi berkongsi beberapa persamaan dengan letdeklarasi.

const declarations are block scoped

Like let declarations, const declarations can only be accessed within the block they were declared.

const cannot be updated or re-declared

This means that the value of a variable declared with const remains the same within its scope. It cannot be updated or re-declared. So if we declare a variable with const, we can neither do this:

 const greeting = "say Hi"; greeting = "say Hello instead";// error: Assignment to constant variable. 

nor this:

 const greeting = "say Hi"; const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared 

Every const declaration, therefore, must be initialized at the time of declaration.

This behavior is somehow different when it comes to objects declared with const. While a const object cannot be updated, the properties of this objects can be updated. Therefore, if we declare a const object as this:

 const greeting = { message: "say Hi", times: 4 } 

while we cannot do this:

 const greeting = { words: "Hello", number: "five" } // error: Assignment to constant variable. 

we can do this:

 greeting.message = "say Hello instead"; 

This will update the value of greeting.message without returning errors.

Hoisting of const

Just like let, const declarations are hoisted to the top but are not initialized.

So just in case you missed the differences, here they are:

• var declarations are globally scoped or function scoped while let and const are block scoped.
• var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared.
• They are all hoisted to the top of their scope. But while var variables are initialized with undefined, let and const variables are not initialized.
• While var and let can be declared without being initialized, const must be initialized during declaration.

Got any question or additions? Please let me know.

Thank you for reading :)