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.