Var, Let, dan Const - Apa Bedanya?

Pemrograman

Banyak fitur baru yang mengilap keluar dengan ES2015 (ES6). Dan sekarang, sejak tahun 2020, diasumsikan bahwa banyak pengembang JavaScript telah terbiasa dan mulai menggunakan fitur-fitur ini.

Meskipun asumsi ini mungkin sebagian benar, masih ada kemungkinan bahwa beberapa fitur ini tetap menjadi misteri bagi beberapa pengembang.

Salah satu fitur yang disertakan dengan ES6 adalah penambahan letdan const, yang dapat digunakan untuk deklarasi variabel. Pertanyaannya adalah, apa yang membedakannya dengan barang-barang bagus varyang selama ini kita gunakan? Jika Anda masih belum jelas tentang ini, maka artikel ini untuk Anda.

Dalam artikel ini, kita akan membahas var, letdan const  sehubungan dengan ruang lingkup, penggunaan, dan pengangkatannya. Saat Anda membaca, perhatikan perbedaan di antara keduanya yang akan saya tunjukkan.

Var

Sebelum munculnya ES6, vardeklarasi diatur. Ada masalah yang terkait dengan variabel yang dideklarasikan dengan var. Itulah mengapa diperlukan cara-cara baru untuk mendeklarasikan variabel. Pertama, mari kita pahami varlebih jauh sebelum kita membahas masalah tersebut.

Cakupan var

Ruang lingkup pada dasarnya berarti di mana variabel-variabel ini tersedia untuk digunakan. vardeklarasi memiliki cakupan global atau fungsi / cakupan lokal.

Cakupannya global ketika varvariabel dideklarasikan di luar fungsi. Ini berarti bahwa variabel apa pun yang dideklarasikan dengan di varluar blok fungsi tersedia untuk digunakan di seluruh jendela.

varadalah fungsi yang dicakup saat dideklarasikan dalam suatu fungsi. Ini berarti bahwa ini tersedia dan hanya dapat diakses di dalam fungsi itu.

Untuk lebih memahami, lihat contoh di bawah ini.

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

Di sini, greetertercakup secara global karena berada di luar fungsi sedangkan hellofungsi tercakup. Jadi kita tidak bisa mengakses variabel di helloluar fungsi. Jadi jika kita melakukan ini:

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

Kami akan mendapatkan kesalahan sebagai akibat hellotidak tersedia di luar fungsi.

variabel var dapat dideklarasikan ulang dan diperbarui

Artinya kita bisa melakukan ini dalam lingkup yang sama dan tidak akan mendapatkan error.

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

dan ini juga

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

Mengangkat var

Hoisting adalah mekanisme JavaScript di mana variabel dan deklarasi fungsi dipindahkan ke bagian atas cakupannya sebelum eksekusi kode. Artinya jika kita melakukan ini:

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

itu diartikan sebagai ini:

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

Jadi varvariabel diangkat ke atas ruang lingkupnya dan diinisialisasi dengan nilai undefined.

Masalah dengan var

Ada kelemahan yang menyertai   var. Saya akan menggunakan contoh di bawah ini untuk menjelaskan:

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

Jadi, karena times > 3return true, greeterdidefinisikan ulang menjadi "say Hello instead". Meskipun ini bukan masalah jika Anda secara sadar ingin greeterdidefinisikan ulang, ini menjadi masalah jika Anda tidak menyadari bahwa variabel greetertelah didefinisikan sebelumnya.

Jika Anda telah menggunakan greeterdi bagian lain dari kode Anda, Anda mungkin terkejut dengan keluaran yang mungkin Anda dapatkan. Ini kemungkinan besar akan menyebabkan banyak bug di kode Anda. Inilah mengapa letdan constperlu.

Membiarkan

letsekarang lebih disukai untuk deklarasi variabel. Tidak mengherankan karena ini merupakan peningkatan pada vardeklarasi. Ini juga memecahkan masalah varyang baru saja kita bahas. Mari kita pertimbangkan mengapa demikian.

let adalah block scoped

Blok adalah sekumpulan kode yang dibatasi oleh {}. Sebuah balok hidup dalam kurung kurawal. Semua yang ada di dalam kurung kurawal adalah balok.

Jadi variabel yang dideklarasikan dalam blok dengan let  hanya tersedia untuk digunakan di dalam blok itu. Izinkan saya menjelaskan ini dengan sebuah 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

Kita melihat bahwa menggunakan di helloluar bloknya (tanda kurung kurawal tempat ia didefinisikan) mengembalikan kesalahan. Ini karena letvariabel memiliki cakupan blok.

biarkan bisa diperbarui tetapi tidak dideklarasikan ulang.

Sama seperti var, variabel yang dideklarasikan dengan letdapat diperbarui dalam cakupannya. Tidak seperti var, letvariabel tidak dapat dideklarasikan ulang dalam cakupannya. Jadi sementara ini akan berhasil:

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

ini akan mengembalikan kesalahan:

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

Namun, jika variabel yang sama ditentukan dalam cakupan yang berbeda, 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"

Kenapa tidak ada kesalahan? Ini karena kedua instance diperlakukan sebagai variabel yang berbeda karena memiliki cakupan yang berbeda.

This fact makes let a better choice than var. When using let, you don't have to bother if you have used a name for a variable before as a variable exists only within its scope.

Also, since a variable cannot be declared more than once within a scope, then the problem discussed earlier that occurs with var does not happen.

Hoisting of let

Just like  var, let declarations are hoisted to the top. Unlike var which is initialized as undefined, the let keyword is not initialized. So if you try to use a let variable before declaration, you'll get a Reference Error.

Const

Variables declared with the const maintain constant values. const declarations share some similarities with let declarations.

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 :)