Perbedaan let, var, dan const di JavaScript

Ketika baru belajar JavaScript, salah satu hal yang sering membingungkan adalah ada tiga cara mendeklarasikan variabel: var, let, dan const. Ketiganya terlihat mirip tapi memiliki...

Perbedaan let, var, dan const di JavaScript

Ketika baru belajar JavaScript, salah satu hal yang sering membingungkan adalah ada tiga cara mendeklarasikan variabel: var, let, dan const. Ketiganya terlihat mirip tapi memiliki perilaku yang sangat berbeda. Memahami perbedaannya penting agar kode kamu tidak menghasilkan bug yang sulit dilacak.

Sejarah Singkat

Sebelum ES6 (ECMAScript 2015), satu-satunya cara mendeklarasikan variabel di JavaScript adalah dengan var. ES6 kemudian memperkenalkan let dan const untuk mengatasi beberapa kelemahan var. Saat ini, penggunaan var sudah tidak direkomendasikan di kode modern.

Perbedaan Scope

Perbedaan paling mendasar adalah soal scope (ruang lingkup variabel).

var memiliki function scope โ€” variabel hanya terbatas dalam fungsi, tapi bisa diakses di luar blok seperti if atau for:

function contohVar() {
  if (true) {
    var nama = 'Budi'; // var tidak peduli blok {}
  }
  console.log(nama); // 'Budi' โ€” bisa diakses! (tidak error)
}

function contohLet() {
  if (true) {
    let nama = 'Budi'; // let hanya ada di dalam blok {}
  }
  console.log(nama); // ReferenceError: nama is not defined
}

let dan const memiliki block scope โ€” variabel hanya ada di dalam blok {} tempat ia dideklarasikan. Ini jauh lebih aman dan predictable.

Hoisting

Ketiga keyword ini mengalami hoisting (dipindahkan ke atas oleh JavaScript engine), tapi dengan cara berbeda:

// Dengan var โ€” tidak error, hasilnya undefined
console.log(angka); // undefined (bukan error)
var angka = 10;
console.log(angka); // 10

// Dengan let โ€” error!
console.log(nilai); // ReferenceError: Cannot access 'nilai' before initialization
let nilai = 20;

var di-hoist dan langsung diinisialisasi dengan nilai undefined. Sedangkan let dan const di-hoist tapi tidak diinisialisasi โ€” masuk ke "Temporal Dead Zone" hingga baris deklarasinya dieksekusi. Perilaku var ini sering menjadi sumber bug yang membingungkan.

Re-deklarasi dan Re-assignment

Perbedaan lain yang penting adalah kemampuan untuk mendeklarasikan ulang dan mengubah nilai:

// var โ€” boleh dideklarasikan ulang
var kota = 'Jakarta';
var kota = 'Bandung'; // Tidak error โ€” kota sekarang 'Bandung'

// let โ€” boleh diubah nilainya, tapi TIDAK boleh dideklarasikan ulang
let kota2 = 'Jakarta';
kota2 = 'Bandung'; // OK โ€” nilai berubah
let kota2 = 'Surabaya'; // SyntaxError: Identifier 'kota2' has already been declared

// const โ€” TIDAK boleh diubah nilainya DAN tidak boleh dideklarasikan ulang
const negara = 'Indonesia';
negara = 'Malaysia'; // TypeError: Assignment to constant variable

const Bukan Berarti Nilai Tidak Bisa Berubah Sama Sekali

Perlu dipahami bahwa const berarti binding-nya yang tidak bisa diubah, bukan nilai di dalamnya. Untuk objek dan array, propertinya masih bisa dimodifikasi:

const user = {
  nama: 'Andi',
  umur: 25
};

user.umur = 26; // OK! Properti objek bisa diubah
user.kota = 'Yogyakarta'; // OK! Properti baru bisa ditambah
console.log(user); // { nama: 'Andi', umur: 26, kota: 'Yogyakarta' }

user = {}; // TypeError! Tidak bisa mengganti referensi objek

// Hal yang sama berlaku untuk array
const angka = [1, 2, 3];
angka.push(4); // OK!
angka = [5, 6]; // TypeError!

Kapan Harus Menggunakan Masing-masing?

  • const โ€” Gunakan ini sebagai default untuk semua variabel yang nilainya tidak akan di-reassign. Ini membuat kode lebih aman dan mudah dipahami.
  • let โ€” Gunakan ketika kamu perlu mengubah nilai variabel, misalnya counter dalam loop atau variabel yang nilainya bergantung kondisi.
  • var โ€” Sebaiknya hindari di kode modern. Hanya akan kamu temui di kode lama (legacy code).
// Contoh penggunaan yang tepat
const MAX_RETRY = 3; // nilai tetap, pakai const
const baseUrl = 'https://api.contoh.com'; // nilai tetap, pakai const

let hitungCoba = 0; // akan berubah, pakai let
let isLoggedIn = false; // akan berubah, pakai let

for (let i = 0; i < 5; i++) { // i berubah tiap iterasi, pakai let
  console.log(i);
}

Ringkasan Perbandingan

  • Scope: var = function scope | let & const = block scope
  • Hoisting: var = diinisialisasi undefined | let & const = Temporal Dead Zone
  • Re-deklarasi: var = boleh | let & const = tidak boleh
  • Re-assignment: var & let = boleh | const = tidak boleh

Kesimpulan

Gunakan const sebagai pilihan utama, lalu beralih ke let hanya jika variabel perlu diubah nilainya. Hindari var karena perilaku scope dan hoisting-nya yang tidak intuitif bisa menyebabkan bug yang sulit dilacak. Dengan kebiasaan ini, kode JavaScript kamu akan lebih bersih, aman, dan mudah dipahami orang lain.

perbedaan let var const javascript var let const scope javascript hoisting javascript deklarasi variabel javascript
Bagikan artikel
Kembali

Komentar (0)

Punya pertanyaan atau tambahan? Tulis di bawah โ€” tak perlu login.

Membalas komentarโ€ฆ batal

Belum ada komentar. Jadilah yang pertama!

๐Ÿš€ Partner Recommendation

Butuh Source Code & Aplikasi Premium?

Download aplikasi Laravel, POS, Sekolah, Klinik, ERP, dan source code siap pakai di GudangCode.

GudangCode
  • โœ” Source Code Premium
  • โœ” Sistem Siap Pakai
  • โœ” Lifetime Update
  • โœ” Membership Lifetime
  • โœ” Update Aplikasi Harian
Daftar Membership โ†’