Perbedaan utama antara var, let, dan const terletak pada tiga hal: jangkauan (scope) di mana variabel bisa diakses, apakah nilainya boleh diubah setelah dibuat, dan bagaimana perilakunya saat diangkat ke atas (hoisting). Ringkasnya: const untuk nilai yang tetap, let untuk nilai yang bisa berubah, dan var adalah cara lama yang sebaiknya kamu hindari di kode baru. Ketiganya sama-sama dipakai untuk mendeklarasikan variabel, “wadah” bernama untuk menyimpan data, tapi aturan mainnya berbeda, dan salah memilih bisa jadi sumber bug yang bikin pusing.

Di panduan ini kamu akan memahami perbedaan ketiganya benar-benar dari nol: kenapa JavaScript sampai punya tiga cara mendeklarasikan variabel, apa itu scope dan kenapa itu penting, konsep reassign versus redeclare, apa itu hoisting dan “temporal dead zone”, sampai aturan praktis yang bisa langsung kamu pakai setiap hari. Semua dengan contoh kode berbahasa Indonesia yang bisa langsung kamu coba di console browser.

Kenapa JavaScript Punya Tiga Cara?

Dulu, dari tahun 1995 sampai 2015, JavaScript hanya punya satu cara mendeklarasikan variabel: var. Masalahnya, var punya beberapa perilaku yang membingungkan dan sering jadi sumber bug, terutama soal scope dan hoisting yang akan kita bahas sebentar lagi.

Maka pada tahun 2015, versi besar JavaScript bernama ES6 (ECMAScript 2015) memperkenalkan dua kata kunci baru: let dan const. Keduanya memperbaiki kelemahan var dengan aturan yang lebih ketat dan lebih mudah diprediksi. Sejak saat itu, praktik terbaik di industri adalah berhenti memakai var dan hanya menggunakan let atau const.

Jadi kalau kamu bertanya-tanya “kenapa tutorial lama pakai var tapi tutorial baru pakai const?”, jawabannya sesederhana itu: var adalah warisan masa lalu, let dan const adalah standar modern. Kalau kamu baru mulai belajar, fokuslah ke let dan const; var cukup kamu kenali supaya bisa membaca kode lama. Kalau kamu benar-benar baru di dunia JavaScript, ada baiknya baca dulu panduan apa itu JavaScript untuk konteks yang lebih luas sebelum menyelam ke sini.

Perbedaan var, let, dan const Sekilas

Sebelum masuk ke detail, mari lihat gambaran besarnya lebih dulu. Tabel-diagram di bawah membandingkan ketiganya di empat aspek terpenting: scope, kemampuan reassign, kemampuan deklarasi ulang, dan hoisting. Kolom const sengaja disorot karena itulah pilihan default yang sebaiknya kamu pakai.

Aspek

varlama · hindari

letbisa berubah

constdefault terbaik

Scope

Function scope

Block scope

Bisa di-reassign?

Tidak

Bisa dideklarasi ulang?

Ya (bahaya)

Tidak

Hoisting

Ya → undefined

TDZ (error)

Aturan praktis: pakai const dulu, ganti ke let hanya kalau nilainya perlu berubah, dan hindari var.

Sekarang mari kita bedah setiap aspek satu per satu supaya kamu benar-benar paham, bukan sekadar menghafal tabel.

1. Scope: Di Mana Variabel Bisa Diakses?

Scope adalah “wilayah” di dalam kode di mana sebuah variabel bisa dilihat dan dipakai. Inilah perbedaan paling penting antara var dengan let/const.

let dan const bersifat block-scoped. Artinya, variabel hanya hidup di dalam blok { ... } tempat ia dideklarasikan, entah itu blok if, blok for, atau kurung kurawal apa pun. Di luar blok itu, variabel tidak ada.

if (true) {
  let pesan = "Halo dari dalam blok"
  console.log(pesan)  // "Halo dari dalam blok", aman
}

console.log(pesan)  // ERROR! pesan tidak dikenal di luar blok

Sementara var bersifat function-scoped. Ia mengabaikan blok biasa seperti if atau for, dan hanya “terkurung” oleh fungsi. Ini sering mengejutkan pemula:

if (true) {
  var pesan = "Halo"
}

console.log(pesan)  // "Halo", var BOCOR keluar dari blok if!

Perhatikan bedanya: variabel var bocor keluar dari blok if, sedangkan let/const tidak. Perilaku “bocor” inilah yang sering menyebabkan variabel tanpa sengaja saling menimpa di kode besar.

2. Reassign vs Redeclare: Apa Bedanya?

Ini dua istilah yang sering tertukar, padahal maknanya berbeda.

Reassign berarti memberi nilai baru ke variabel yang sudah ada. Di sinilah const berbeda dari let. Variabel let boleh di-reassign, sedangkan const (dari kata constant/konstan) tidak boleh:

let skor = 10
skor = 20        // boleh, let bisa di-reassign
console.log(skor)  // 20

const pi = 3.14
pi = 3.14159     // ERROR! const tidak bisa di-reassign

Redeclare berarti mendeklarasikan ulang variabel dengan nama yang sama di scope yang sama. var memperbolehkannya (dan ini berbahaya karena bisa diam-diam menimpa data), sementara let dan const akan langsung memberi error yang membantu kamu menangkap kesalahan lebih awal:

var nama = "Budi"
var nama = "Sari"   // boleh di var, tapi berbahaya!

let umur = 20
let umur = 21       // ERROR! let tidak bisa dideklarasi ulang

Contoh yang memperjelas poin di atas:

const user = { nama: "Budi" }

user.nama = "Sari"    // BOLEH, kita mengubah isi object
user.umur = 22        // BOLEH, menambah properti juga oke
console.log(user)     // { nama: "Sari", umur: 22 }

user = { nama: "Ana" } // ERROR! ini reassign seluruh variabel

3. Hoisting dan Temporal Dead Zone

Hoisting adalah perilaku JavaScript yang “mengangkat” deklarasi variabel ke atas scope-nya sebelum kode dijalankan. Ketiga kata kunci sebenarnya di-hoist, tapi hasilnya berbeda.

Dengan var, variabel diangkat dan langsung diberi nilai awal undefined. Akibatnya kamu bisa mengaksesnya sebelum baris deklarasi tanpa error, tapi nilainya undefined, yang sering menyembunyikan bug:

console.log(kota)  // undefined (tidak error, tapi menyesatkan)
var kota = "Bandung"

Dengan let dan const, variabel memang diangkat, tapi belum boleh diakses sampai baris deklarasinya dieksekusi. Rentang “belum boleh diakses” ini disebut Temporal Dead Zone (TDZ). Mengakses variabel di dalam TDZ menghasilkan error yang jelas:

console.log(kota)  // ERROR: Cannot access 'kota' before initialization
let kota = "Bandung"

Sekilas error terlihat menyebalkan, tapi ini justru fitur bagus: JavaScript memberitahumu bahwa kamu memakai variabel terlalu awal, alih-alih diam-diam memberi undefined yang bisa menjalar jadi bug lebih besar.

Kapan Pakai const, Kapan Pakai let?

Setelah paham perbedaannya, aturan praktisnya sederhana dan bisa langsung kamu terapkan:

Pakai const sebagai default. Deklarasikan hampir semua variabelmu dengan const. Ini membuat maksud kodemu jelas (“nilai ini tidak akan berganti”) dan mencegah reassign yang tidak disengaja.
Ganti ke let hanya kalau nilainya memang perlu berubah. Contoh: penghitung dalam loop, skor yang bertambah, atau status yang berpindah dari false ke true.
Jangan pakai var di kode baru. Kamu cukup mengenalinya supaya bisa membaca dan memelihara kode lama.

const NAMA_SITUS = "belajarweb.dev"  // tidak akan berubah → const
const pajak = 0.11                   // konstanta → const

let total = 0                        // akan diakumulasi → let
for (let i = 0; i < 5; i++) {        // penghitung loop → let
  total = total + i
}

Pola pikirnya: mulai dari const, dan hanya “turun” ke let ketika compiler atau logika memaksamu. Dengan begitu, siapa pun yang membaca kodemu (termasuk dirimu sendiri tiga bulan lagi) langsung tahu variabel mana yang stabil dan mana yang berubah-ubah. Kalau kamu ingin berlatih langsung menulis deklarasi ini di browser dengan latihan bertahap, ada materi variabel interaktif di Hyper Sheets yang mengajakmu praktik sambil mengoreksi jawabanmu secara langsung.

Kesalahan Umum Seputar var, let, const

Beberapa jebakan yang paling sering menimpa pemula:

1. Mengira const mengunci isi array/object. Seperti dibahas di atas, const hanya mencegah reassign. Isi array atau object tetap bisa berubah. Jangan kaget kalau const angka = [1,2] lalu angka.push(3) tetap berhasil.

2. Memakai var karena “tutorial lama begitu”. Banyak tutorial YouTube dan artikel lama masih pakai var. Di kode barumu, ganti semua dengan const/let. Perilakunya lebih aman dan lebih mudah diprediksi.

3. Memakai let padahal nilainya tidak pernah berubah. Ini bukan error, tapi menyesatkan pembaca. Kalau nilai tidak berubah, const mengomunikasikan niat itu dengan jelas.

4. Lupa bahwa let/const block-scoped. Kalau kamu mendeklarasikan variabel di dalam blok if atau for lalu mencoba memakainya di luar, kamu akan dapat error. Deklarasikan di scope yang lebih luar kalau memang perlu diakses dari luar.

// Salah: total dideklarasikan di dalam blok, dipakai di luar
if (ada) {
  const total = 100
}
console.log(total)  // ERROR

// Benar: deklarasikan di scope luar, isi di dalam
let total = 0
if (ada) {
  total = 100
}
console.log(total)  // 100

5. Menganggap error TDZ sebagai bug bahasa. TDZ bukan bug, itu perilaku sengaja yang membantumu menemukan penggunaan variabel yang terlalu dini. Pindahkan deklarasi ke atas penggunaannya, selesai.

Cek Pemahaman

Manakah operasi berikut yang akan menyebabkan ERROR di JavaScript?

FAQ Seputar var, let, const

Apa perbedaan utama var, let, dan const?

Perbedaannya ada di tiga aspek. Scope: var function-scoped (bisa bocor dari blok), sedangkan let dan const block-scoped (terkurung dalam { }). Reassign: var dan let bisa diganti nilainya, const tidak. Hoisting: var diakses sebelum deklarasi menghasilkan undefined, sedangkan let/const menghasilkan error (Temporal Dead Zone). Untuk kode modern, pakai const sebagai default dan let bila perlu diubah.

Kapan sebaiknya pakai const dan kapan let?

Pakai const sebagai pilihan default untuk hampir semua variabel, ini menandakan nilainya tidak akan diganti. Pakai let hanya ketika kamu tahu nilainya akan berubah, seperti penghitung loop, skor yang bertambah, atau status yang berpindah. Kebiasaan “const dulu, let kalau perlu” membuat kodemu lebih mudah dibaca dan lebih aman dari bug reassign yang tidak disengaja.

Apakah const berarti nilainya tidak bisa diubah sama sekali?

Tidak persis. const mencegah reassign (mengganti seluruh variabel dengan nilai baru), tapi tidak membekukan isi data. Kalau const berisi array atau object, isinya masih bisa diubah, misalnya const arr = []; arr.push(1) tetap valid. Yang dikunci adalah ikatan nama variabel ke object-nya, bukan isi object itu sendiri. Untuk benar-benar membekukan object, gunakan Object.freeze().

Apakah var masih boleh dipakai?

Secara teknis var masih berfungsi dan tidak akan dihapus dari JavaScript demi kompatibilitas. Namun di kode baru sebaiknya kamu tidak memakainya, karena perilaku function-scope dan hoisting-nya sering menimbulkan bug yang sulit dilacak. Cukup kenali var supaya bisa membaca dan memelihara kode lama, tapi tulis kode barumu dengan const dan let.

Apa itu hoisting dalam konteks var, let, const?

Hoisting adalah perilaku JavaScript yang “mengangkat” deklarasi variabel ke atas scope sebelum kode dijalankan. Dengan var, variabel yang diangkat langsung bernilai undefined, sehingga mengaksesnya lebih awal tidak error tapi menyesatkan. Dengan let dan const, variabel diangkat tapi belum boleh diakses sampai baris deklarasinya, rentang ini disebut Temporal Dead Zone, dan mengaksesnya menghasilkan error yang jelas.

Kenapa let di dalam loop lebih aman daripada var?

Karena let membuat variabel baru untuk setiap iterasi loop, sedangkan var memakai satu variabel yang sama untuk semua iterasi. Ini sangat terasa saat kamu memakai fungsi asinkron seperti setTimeout di dalam loop: dengan var semua callback mencetak nilai akhir yang sama, sedangkan dengan let setiap callback mengingat nilai iterasinya sendiri. Karena itu let hampir selalu jadi pilihan yang benar untuk perulangan.

Setelah Ini, Belajar Apa?

Menguasai var, let, dan const adalah fondasi penting sebelum melangkah lebih jauh. Berikut jalur lanjutan yang masuk akal:

Tipe data dan operator, pahami jenis-jenis nilai yang bisa kamu simpan di dalam variabel (string, number, boolean, array, object). Semuanya dibahas di panduan apa itu JavaScript.
Fungsi dan scope lebih dalam, konsep scope yang kamu pelajari di sini berlanjut ke fungsi, closure, dan cara this bekerja.
Praktik langsung, teori variabel akan benar-benar melekat kalau kamu langsung menulisnya. Kerjakan latihan variabel interaktif di Hyper Sheets yang memberi umpan balik instan setiap kali kamu salah.
TypeScript, begitu nyaman dengan variabel JavaScript, TypeScript menambahkan lapisan keamanan tipe di atasnya. Mulai dari panduan TypeScript untuk JavaScript developer.

Kuncinya bukan menghafal tabel perbandingan, tapi membangun kebiasaan: tulis const dulu, turun ke let saat perlu, dan tinggalkan var. Kebiasaan kecil ini akan menyelamatkanmu dari banyak bug halus sepanjang perjalananmu sebagai web developer.