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 let
dan const
, yang dapat digunakan untuk deklarasi variabel. Pertanyaannya adalah, apa yang membedakannya dengan barang-barang bagus var
yang selama ini kita gunakan? Jika Anda masih belum jelas tentang ini, maka artikel ini untuk Anda.
Dalam artikel ini, kita akan membahas var
, let
dan const
sehubungan dengan ruang lingkup, penggunaan, dan pengangkatannya. Saat Anda membaca, perhatikan perbedaan di antara keduanya yang akan saya tunjukkan.
Var
Sebelum munculnya ES6, var
deklarasi diatur. Ada masalah yang terkait dengan variabel yang dideklarasikan dengan var
. Itulah mengapa diperlukan cara-cara baru untuk mendeklarasikan variabel. Pertama, mari kita pahami var
lebih jauh sebelum kita membahas masalah tersebut.
Cakupan var
Ruang lingkup pada dasarnya berarti di mana variabel-variabel ini tersedia untuk digunakan. var
deklarasi memiliki cakupan global atau fungsi / cakupan lokal.
Cakupannya global ketika var
variabel dideklarasikan di luar fungsi. Ini berarti bahwa variabel apa pun yang dideklarasikan dengan di var
luar blok fungsi tersedia untuk digunakan di seluruh jendela.
var
adalah 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, greeter
tercakup secara global karena berada di luar fungsi sedangkan hello
fungsi tercakup. Jadi kita tidak bisa mengakses variabel di hello
luar 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 hello
tidak 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 var
variabel 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 > 3
return true, greeter
didefinisikan ulang menjadi "say Hello instead"
. Meskipun ini bukan masalah jika Anda secara sadar ingin greeter
didefinisikan ulang, ini menjadi masalah jika Anda tidak menyadari bahwa variabel greeter
telah didefinisikan sebelumnya.
Jika Anda telah menggunakan greeter
di 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 let
dan const
perlu.
Membiarkan
let
sekarang lebih disukai untuk deklarasi variabel. Tidak mengherankan karena ini merupakan peningkatan pada var
deklarasi. Ini juga memecahkan masalah var
yang 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 hello
luar bloknya (tanda kurung kurawal tempat ia didefinisikan) mengembalikan kesalahan. Ini karena let
variabel memiliki cakupan blok.
biarkan bisa diperbarui tetapi tidak dideklarasikan ulang.
Sama seperti var
, variabel yang dideklarasikan dengan let
dapat diperbarui dalam cakupannya. Tidak seperti var
, let
variabel 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 whilelet
andconst
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 withundefined
,let
andconst
variables are not initialized. - While
var
andlet
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 :)