Memahami Perbedaan antara var, let, dan const di JavaScript
Dalam JavaScript, terdapat tiga kata kunci atau Keyword utama untuk mendeklarasikan Variabel yaitu: var
, let
, dan const
. Meskipun semuanya digunakan untuk tujuan yang sama, yaitu mendeklarasikan Variabel, namun terdapat perbedaan signifikan di antara ketiganya.
Keyword var
Sebelum diperkenalkannya Keyword let
dan const
, var
adalah satu-satunya cara untuk mendeklarasikan Variabel di JavaScript. Namun, penggunaannya memiliki beberapa kelemahan yang menyebabkan munculnya dua Keyword tambahan yaitu let
dan const
.
Cakupan Fungsi Keyword var
Variabel yang dideklarasikan dengan Keyword var
memiliki cakupan atau Scope berdasarkan fungsi lokasi pendeklarsian. Artinya, Variabel var
hanya dapat diakses di dalam fungsi tempat Keyword var
tersebut dideklarasikan.
Hoisting Keyword var
Variabel yang dideklarasikan dengan Keyword var
akan di-Hoist ke atas dari tempat deklarasinya ke awal fungsi atau skrip. Dengan kata lain, kita akan dapat mengakses Variabel sebelum Variabel tersebut dideklarasikan.
Contoh Keyword var
Berikut adalah contoh dari Keyword var
:
function contohVAR() {
if (true) {
var angka = 10;
}
console.log(angka); // Output: 10
}
Pada contoh diatas, variabel angka
dideklarasikan menggunakan var
di dalam blok if
. Meskipun variabel angka
dideklarasikan di dalam blok, namun karena variabel var
memiliki cakupan fungsi, maka variabel angka
akan tetap dapat diakses di luar blok if. Hal tersebut disebabkan oleh Hoisting, di mana deklarasi variabel var angka
diangkat ke atas fungsi sehingga membuatnya dapat diakses dari mana saja di dalam fungsi tersebut.
Keyword let
Keyword let
diperkenalkan dalam ECMAScript 6 (ES6) untuk mengatasi beberapa kelemahan yang dimiliki oleh Keyword var
, terutama dalam hal cakupan dan Hoisting.
Cakupan Blok Keyword let
Variabel yang dideklarasikan dengan let
memiliki cakupan berdasarkan blok tempat mereka dideklarasikan (misalnya, dalam blok if
, for
, atau while
). Artinya, Variabel let
hanya dapat diakses di dalam blok tempat mereka dideklarasikan.
Hoisting Keyword let
Variabel yang dideklarasikan dengan let
tidak di-Hoist ke atas. Jadi, kita tidak akan dapat mengaksesnya sebelum Variabel tersebut dideklarasikan.
Contoh Keyword let
Berikut adalah contoh dari Keyword let
:
function contohLET() {
if (true) {
let angka = 10;
}
console.log(angka); // Error: angka is not defined
}
Pada contoh diatas, variabel angka
dideklarasikan menggunakan Keyword let
di dalam blok if
. Karena variabel let
memiliki cakupan blok, maka variabel angka
hanya dapat diakses di dalam blok if
tempatnya dideklarasikan.
Selain itu, karena variabel let
tidak di-Hoist, jika kita mencoba mengakses variable let
di luar blok if
, maka akan menghasilkan error "angka is not defined".
Keyword const
Keyword const
, juga diperkenalkan dalam ECMAScript 6 (ES6), digunakan untuk mendeklarasikan variabel yang nilainya tidak akan berubah-ubah setelah dideklarasikan.
Cakupan Blok Keyword const
Sama seperti Keyword let
, variabel yang dideklarasikan dengan const
juga memiliki cakupan berdasarkan blok tempat mereka dideklarasikan.
Hoisting Keyword const
Sama juga seperti Keyword let
, variabel yang dideklarasikan dengan const
tidak di-Hoist. Artinya, kita tidak akan dapat mengaksesnya sebelum Variabel tersebut dideklarasikan.
Nilai Keyword const
Setelah diberi nilai atau Value, variabel yang dideklarasikan dengan const
tidak dapat diubah. Namun, Object dan Array yang dideklarasikan dengan const
struktur internalnya masih dapat diubah, hanya referensi ke Object dan Array itu sendiri yang tidak dapat diubah.
Contoh Keyword const
Berikut adalah contoh dari Keyword const:
function contohCONST() {
const angka = 10;
angka = 20; // Error: invalid assignment to const 'angka'
}
Pada contoh diatas, variabel angka dideklarasikan menggunakan const
dan diberi nilai 10
. Karena const
dapat membuat variabel tidak dapat diubah setelah dideklarasikan, jika kita mencoba mengubah nilai dari variable angka
menjadi 20
maka akan menghasilkan Error "Error: invalid assignment to const 'angka'".
Kesimpulan
Keyword var
, let
, dan const
digunakan untuk mendeklarasikan variabel dalam JavaScript, namun terdapat perbedaan dalam cakupan (Scope), Hoisting, dan kemampuan untuk mengubah nilainya. Sangat disarankan untuk menggunakan Keyword let
dan const
karena dapat memberikan kontrol yang lebih baik atas cakupan variabel dan mencegah perubahan yang tidak disengaja.
Semoga artikel ini bermanfaat dalam memperdalam pemahaman Anda tentang JavaScript modern.