Perbedaan var, let, dan const di JavaScript

di javascript ada tiga cara mendeklarasikan variabel, yaitu var, let, dan const. sama-sama dipakai untuk menyimpan data, tapi masing-masing punya aturan main sendiri soal lingkup (scope), hoisting, dan boleh tidaknya variabel itu diubah lagi.

mungkin kalian bertanya, “kenapa harus ada tiga? kenapa tidak satu saja?” jawabannya ada di sejarah. var sudah ada sejak javascript pertama kali rilis. let dan const baru muncul di ES6 (ECMAScript 2015) untuk menambal kelemahan var.

saya sendiri dulu sempat menghabiskan waktu cukup lama mengejar bug yang ternyata sumbernya cuma var di dalam loop, kasus yang saya ceritakan di studi kasus lengkap 🙂. begitu paham perbedaannya, bug model begitu hilang seketika. dari pengalaman itu saya saranin materi ini bener-bener dikuasai sejak awal.

1. Tabel Perbandingan Cepat

sebelum masuk ke detail, berikut perbandingan singkatnya:

mari kita bahas satu-satu dengan contoh.

2. var: Function Scope

var ini cara lama mendeklarasikan variabel di javascript. ciri utamanya function scoped, artinya variabel hanya bisa diakses di dalam fungsi tempat dia dideklarasikan.

Contoh Function Scope var

function contohVar() {
    if (true) {
        var x = 10;
    }
    console.log(x); // 10 — bisa diakses di luar block if
}

perhatikan, x yang dideklarasikan di dalam block if tetap bisa diakses di luar block tersebut, selama masih di dalam fungsi contohVar(). hal ini bikin bingung kalau kalian terbiasa dengan block scope dari bahasa pemrograman lain.

contohVar();
console.log(x); // Error: x is not defined

perilaku var yang “bocor” keluar dari block inilah yang dulu sering bikin saya bingung saat membaca kode orang lain. setelah tahu konsep function scope, kode yang tadinya terlihat seperti bug ternyata berjalan sesuai aturan var, dan justru di situlah alasan let dan const dibuat.

Masalah var: Hoisting dan Redeclaration

Hoisting pada var:

console.log(a); // undefined — bukan error!
var a = 5;

variabel var tadi “diangkat” ke atas scope-nya, dan diisi nilai undefined lebih dulu. itulah kenapa tidak muncul error.

Redeclaration pada var:

var nama = "Andi";
var nama = "Budi"; // ✅ Tidak error
console.log(nama); // Budi

bisa menyebabkan bug yang sulit dilacak kalau tidak sengaja mendeklarasikan ulang variabel yang sama.

3. let: Block Scope

let ini cara modern untuk mendeklarasikan variabel yang nilainya bisa berubah. ciri utamanya, block scoped.

Contoh Block Scope let

function contohLet() {
    if (true) {
        let y = 10;
        console.log(y); // 10
    }
    console.log(y); // Error: y is not defined
}

variabel y cuma bisa diakses di dalam block if tempat dia dideklarasikan. lebih intuitif dan sesuai ekspektasi kebanyakan programmer.

Temporal Dead Zone (TDZ)

beda dengan var, hoisting pada let tidak menginisialisasi nilai. ada periode antara masuk scope dan deklarasi yang disebut Temporal Dead Zone (TDZ):

console.log(b); // Error: Cannot access 'b' before initialization
let b = 10;

TDZ bikin kode lebih aman karena kita tidak bisa mengakses variabel sebelum dideklarasikan.

Tidak Bisa Redeclare

let nama = "Andi";
let nama = "Budi"; // ❌ Error: Identifier 'nama' has already been declared

ini mencegah kesalahan deklarasi ganda yang sering terjadi pada var.

Bisa Reassign

let umur = 25;
umur = 26; // ✅ Bisa diubah
console.log(umur); // 26

4. const: Block Scope dan Binding yang Tidak Bisa Diubah

kalau const ini mirip let (block scoped, kena TDZ, tidak bisa redeclare), cuma ada satu bedanya: binding-nya tidak bisa diubah.

Wajib Inisialisasi

const pi; // ❌ Error: Missing initializer in const declaration

setiap const harus langsung diberi nilai saat dideklarasikan.

Tidak Bisa Reassign

const pi = 3.14159;
pi = 3.14; // ❌ Error: Assignment to constant variable

const pada Object dan Array

perhatikan, const itu mencegah reassignment, bukan membekukan nilai. untuk object dan array, properti atau elemen di dalamnya masih bisa diubah:

const user = { nama: "Andi", umur: 25 };
user.umur = 26; // ✅ Bisa — mengubah properti
console.log(user); // { nama: "Andi", umur: 26 }

// user = { nama: "Budi" }; // ❌ Error — reassignment tidak boleh

const angka = [1, 2, 3];
angka.push(4); // ✅ Bisa — menambah elemen
console.log(angka); // [1, 2, 3, 4]

// angka = [5, 6, 7]; // ❌ Error

5. Praktik Baik: Kapan Pakai yang Mana?

berdasarkan praktik komunitas javascript modern, kira-kira begini panduannya.

const sebagai pilihan utama

pakai const sebagai pilihan utama. ini semacam sinyal buat yang baca kode, termasuk kalian sendiri pas baca ulang beberapa bulan kemudian, kalau variabel ini memang tidak boleh diubah.

const PI = 3.14159;
const API_URL = "https://api.example.com";
const user = { id: 1, nama: "Andi" };

let kalau nilainya berubah

pakai let kalau kalian tahu nilai variabelnya bakal berubah di kemudian hari.

let counter = 0;
counter++;

let total = 0;
for (let i = 0; i < 10; i++) {
    total += i;
}

var yang mending dihindari

untuk var, mending hindari dipakai di kode modern, kecuali kalian menulis kode buat browser jadul banget (IE 10 ke bawah).

// ❌ Tidak disarankan
var nama = "Andi";

// ✅ Lebih baik
let nama = "Andi";
// atau
const nama = "Andi";

6. Studi Kasus Lengkap

mari lihat perbedaannya dalam satu contoh nyata:

// Contoh yang membingungkan dengan var
var daftar = [];
for (var i = 0; i < 5; i++) {
    daftar.push(function() {
        console.log(i);
    });
}
daftar[0](); // 5 — bukan 0!
daftar[1](); // 5

// Contoh yang benar dengan let
var daftar2 = [];
for (let j = 0; j < 5; j++) {
    daftar2.push(function() {
        console.log(j);
    });
}
daftar2[0](); // 0
daftar2[1](); // 1

penjelasannya, dengan var semua fungsi di dalam array merujuk pada variabel i yang sama. setelah loop selesai, nilai i sudah jadi 5. sedangkan dengan let, tiap iterasi punya binding j yang terpisah, jadi nilai yang dicetak sesuai dengan iterasinya.

Kesimpulan

perbedaan utama var, let, dan const terletak pada:

• scope: var function scope, let/const block scope
• hoisting: var diinisialisasi undefined, let/const ada di temporal dead zone
• redeclaration: var boleh, let/const tidak
• reassignment: var/let boleh, const tidak
• inisialisasi: var/let opsional, const wajib

aturan praktisnya gampang: selalu pakai const secara default. pakai let hanya kalau kalian yakin nilai variabelnya perlu diubah. jangan pakai var di kode javascript modern. ini juga yang selalu saya terapkan di semua project, dan begitu terbiasa, aturan ini terasa kayak kebiasaan alami, bukan keputusan yang perlu dipikirkan lagi 🙂.