Variabel JavaScript: Var, Let, dan Const

Variabel adalah salah satu fondasi terpenting dalam JavaScript. Semua logika, data, dan proses dalam program akan selalu melibatkan variabel. Karena itulah memahami variabel JavaScript dan mengetahui perbedaan var let const sangat penting, terutama bagi pemula yang ingin belajar JavaScript secara benar sejak awal.

Banyak orang yang baru memulai JavaScript sering bingung:

• Kapan harus menggunakan var?
• Apakah let dan const sama saja?
• Mengapa banyak tutorial modern menyarankan menghindari var?
• Kenapa ada error “Assignment to constant variable”?
• Apa itu scope var let const?

Tenang—artikel ini akan membahasnya dari dasar hingga tingkat yang lebih mendalam, lengkap dengan contoh, diagram, ilustrasi, dan best practice modern.

Baca juga: Struktur Dasar JavaScript dan Cara Menulis Kode

Apa Itu Variabel dalam JavaScript?

Sederhananya, variabel adalah “wadah” untuk menyimpan nilai atau data. Data ini bisa berupa teks, angka, objek, array, boolean, dan sebagainya.

Analogi sederhana:

• Variabel = Laci penyimpanan
• Nama variabel = Label di laci
• Nilai variabel = Isi laci

Contoh dasar:

let nama = "Andi";
let umur = 21;Code language: JavaScript (javascript)

Variabel sangat penting karena JavaScript adalah bahasa yang dinamis. Hampir semua proses—dari menghitung angka, menampilkan pesan, menyimpan data API, hingga membuat fitur aplikasi—melibatkan variabel.

3 Cara Deklarasi Variabel JavaScript

JavaScript menyediakan tiga cara utama:

• var (cara lama)
• let (ES6)
• const (ES6)

Ketiganya terlihat serupa, tetapi memiliki perbedaan besar dalam scope, hoisting, dan reassignability. Perbedaan inilah yang menjadi alasan munculnya banyak bug dalam kode pemula.

1. VAR — Cara Lama dalam JavaScript

var adalah cara mendeklarasikan variabel yang sudah digunakan sejak JavaScript dibuat. Meskipun masih bisa dipakai, var memiliki banyak kelemahan yang dapat menyulitkan pemula.

Contoh deklarasi:

var nama = "Budi";
console.log(nama);Code language: JavaScript (javascript)

Kelebihan var:

• Fleksibel
• Mudah dipahami pemula
• Tetap bekerja di seluruh browser lama

Kelemahan var:

• Tidak memiliki block scope
• Bisa dideklarasikan ulang tanpa error
• Rentan menimbulkan bug

Terpengaruh hoisting dengan cara yang membingungkan pemula

LET — Variabel yang Bisa Diubah

let diperkenalkan pada ES6 (2015) sebagai jawaban untuk memperbaiki kelemahan var. Ini adalah pilihan terbaik untuk variabel yang nilainya akan berubah.

let umur = 20;
umur = 21; // diperbolehkanCode language: JavaScript (javascript)

Kelebihan let:

• Menggunakan block scope
• Tidak bisa dideklarasikan ulang dalam scope sama
• Lebih aman dan modern

3. CONST — Variabel Konstan (Tetap)

const digunakan untuk variabel yang nilainya tidak berubah.

const pi = 3.14;
// pi = 4; (error)Code language: JavaScript (javascript)

Namun perlu dipahami:

• const tidak membuat value menjadi immutabel
• Hanya referensi variabelnya yang tidak boleh diganti

Contoh:

const user = {
        nama: "Aris",
        umur: 25
};

user.umur = 26; // masih boleh
user = { nama: "Budi", umur: 21 }; // errorCode language: JavaScript (javascript)

Yang tidak boleh adalah mengganti referensi-nya:

user = {}; // errorCode language: JavaScript (javascript)

Perbedaan VAR, LET, CONST (RINGKAS)

Fitur	var	let	const
Scope	Function scope	Block scope	Block scope
Hoisting	Yes (undefined)	Yes (TDZ)	Yes (TDZ)
Reassign	Yes	Yes	No
Redeclare	Yes	No	No
Rekomendasi?	Tidak	Disarankan	Disarankan

Memahami Scope var let const

Ini adalah bagian paling penting bagi pemula.

1. Block Scope

let dan const hanya hidup di dalam blok { }.

if (true) {
        let x = 10;
        const y = 20;
}

console.log(x); // error
console.log(y); // errorCode language: JavaScript (javascript)

2. Function Scope pada var

var mengabaikan block scope.

if (true) {
        var nama = "Aris";
}

console.log(nama); // tidak error!Code language: JavaScript (javascript)

Hoisting: Perbedaan Besar Antara var, let, dan const

Hoisting var:

console.log(a); // undefined
var a = 10;Code language: JavaScript (javascript)

Variabel di-“angkat” ke atas, tetapi nilainya undefined, bukan error.

Hoisting let & const:

console.log(b); // error
let b = 20;Code language: JavaScript (javascript)

Karena masuk ke Temporal Dead Zone (TDZ).

Contoh var let const Untuk Pemula

1. Contoh var:

var nama = "Aris";
var nama = "Budi"; // bisa redeclareCode language: JavaScript (javascript)

2. Contoh let:

let umur = 20;
umur = 21; // bisaCode language: JavaScript (javascript)

3. Contoh const:

const negara = "Indonesia";
negara = "Malaysia"; // errorCode language: JavaScript (javascript)

Contoh Perbandingan Sederhana

Dengan var:

for (var i = 1; i <= 3; i++) {
        console.log(i);
}

console.log(i); // tetap bisa diaksesCode language: JavaScript (javascript)

Dengan let:

for (let i = 1; i <= 3; i++) {
        console.log(i);
}

console.log(i); // errorCode language: JavaScript (javascript)

let lebih aman.

Latihan Dasar untuk Pemula

1. Mengelola Data User

const user = {
        nama: "Aris",
        umur: 20
};

user.umur = 21; // boleh
console.log(user);Code language: JavaScript (javascript)

2. Menghitung Diskon

let harga = 10000;
const diskon = 0.2;

let total = harga - (harga * diskon);
console.log(total);Code language: JavaScript (javascript)

3. Perulangan dengan let

for (let i = 0; i < 5; i++) {
        console.log("Iterasi:", i);
}Code language: JavaScript (javascript)

Kesimpulan

Mempelajari variabel adalah langkah paling fundamental dalam JavaScript. Pemahaman tentang var, let, dan const bukan hanya tentang cara menulis kode, melainkan juga memahami bagaimana JavaScript bekerja di balik layar.

Ringkasnya:

• Gunakan const untuk nilai tetap
• Gunakan let ketika nilai berubah
• Hindari var kecuali perlu kompatibilitas lama

Jika kamu membiasakan diri dengan aturan ini sejak awal, kamu akan terhindar dari banyak bug yang biasanya dialami pemula. Dasar-dasar ini akan sangat membantumu ketika nanti belajar tentang objek, DOM, event, asynchronous, atau framework seperti React dan Vue.