JAVASCRIPT DASAR LOGIKA PROGRAMING

Variabel Modern: Kenapa Kita Harus Meninggalkan var

Sebelum tahun 2015 (sebelum era ES6), JavaScript hanya memiliki satu cara untuk membuat variabel: var. Sayangnya, var memiliki aturan yang sangat longgar dan sering kali bertentangan dengan logika bahasa pemrograman backend terstruktur seperti PHP. Kelonggaran ini sering menjadi sumber bug misterius dalam aplikasi skala besar.

Kini, JavaScript modern telah memperkenalkan let dan const. Memahami mengapa kita membuang var adalah langkah pertama untuk menulis kode frontend atau API yang bersih dan aman.

1. Masalah Pertama: Function Scope vs Block Scope

Bagi pengembang yang terbiasa dengan ekosistem PHP atau Laravel, aturan cakupan (scope) var terasa sangat aneh. var bersifat Function-Scoped (hanya dibatasi oleh fungsi), sedangkan let dan const bersifat Block-Scoped (dibatasi oleh kurung kurawal { } apa pun, seperti if, for, atau while).

Contoh Bahaya di Sistem Kritis:

Bayangkan Anda sedang memvalidasi data di sistem sinkronisasi Kolak Pisang. Anda ingin membuat variabel sementara di dalam blok if.

// MENGGUNAKAN VAR (Berbahaya)
var statusAkta = "Terverifikasi"; if (dokumenHilang) { // Niatnya membuat variabel lokal hanya untuk blok ini var statusAkta = "Ditangguhkan"; console.log("Status di dalam if:", statusAkta); // Output: Ditangguhkan
} // BENCANA: Variabel di luar if ikut berubah!
console.log("Status di luar if:", statusAkta); // Output: Ditangguhkan

var tidak peduli dengan batas kurung kurawal if. Ia menembus keluar dan menimpa variabel di luarnya.

Solusinya dengan let:

let statusAkta = "Terverifikasi"; if (dokumenHilang) { let statusAkta = "Ditangguhkan"; // Terkurung aman di dalam blok ini
} console.log("Status di luar:", statusAkta); // Output: Terverifikasi (Aman!)

2. Masalah Kedua: Deklarasi Ulang (Redeclaration)

Dalam proyek tim atau aplikasi dengan file puluhan ribu baris seperti portal berita SatuMedia, ada kemungkinan Anda tidak sengaja menggunakan nama variabel yang sama dua kali.

var kategoriBerita = "Politik";
// Ratusan baris kode ke bawah...
var kategoriBerita = "Teknologi"; // var membiarkan ini terjadi tanpa error!

< !---->

Ini sangat berbahaya karena data bisa tertimpa secara diam-diam. Sebaliknya, let dan const akan langsung melemparkan pesan error keras (Loud Error) jika Anda mencoba melakukan deklarasi ulang dalam cakupan yang sama, membantu Anda mendeteksi bug sejak dini.

let kategoriBerita = "Politik";
let kategoriBerita = "Teknologi"; // ERROR: Identifier 'kategoriBerita' has already been declared

3. Masalah Ketiga: Hoisting dan Kebingungan Undefined

Hoisting adalah perilaku bawaan JavaScript di mana semua deklarasi variabel "diangkat" ke bagian paling atas dari file atau fungsi sebelum kode dieksekusi.

Perilaku var yang Membingungkan:

Saat var di-hoisting, ia otomatis diberi nilai awal undefined. Anda bisa memanggil variabel sebelum Anda membuatnya, dan JavaScript tidak akan protes.

console.log(namaPenulis); // Output: undefined (Bukan error!)
var namaPenulis = "Dika";

Perilaku let dan const (Temporal Dead Zone):

< p data-path-to-node="25">Mereka juga di-hoisting, namun mereka dimasukkan ke dalam Temporal Dead Zone (TDZ). Anda dilarang keras menyentuh mereka sebelum baris deklarasinya dieksekusi.

console.log(namaPenulis); // ERROR: Cannot access 'namaPenulis' before initialization
let namaPenulis = "Dika";

Error di sini adalah hal yang baik. Mengetahui ada kesalahan referensi secara instan jauh lebih baik daripada menelusuri data bernilai undefined di tengah-tengah fungsi perhitungan skor trending.

4. let vs const: Kapan Menggunakan Apa?

Setelah Anda berjanji untuk melupakan var, aturannya sangat sederhana:

1. Gunakan const (Default Utama): Digunakan untuk nilai yang tidak akan pernah diinisialisasi ulang (re-assigned). Ini membuat kode lebih mudah diprediksi. (Ingat, pada Array atau Object, const masih mengizinkan perubahan isi/properti dalamnya, hanya saja wadahnya tidak bisa diganti).

2. Gunakan let: Digunakan hanya jika Anda tahu per sis bahwa variabel tersebut nilainya akan berubah (misalnya: counter di dalam looping, atau status toggle buka/tutup menu).

Tabel Ringkasan