Memahami Variabel, Scope, dan Hoisting di JavaScript.

Cara variabel dideklarasikan menentukan di mana ia bisa diakses (scope) dan bagaimana ia diperlakukan sebelum baris deklarasinya dijalankan (hoisting).

var vs let vs const

var namaLama = "cara lama";     // function-scoped, bisa dideklarasi ulang
let namaBaru = "cara modern";    // block-scoped, bisa diubah nilainya
const namaTetap = "tidak berubah"; // block-scoped, tidak bisa diassign ulang

Praktik JavaScript modern nyaris tidak lagi memakai var, dan lebih memilih const sebagai default, beralih ke let hanya saat nilainya memang perlu berubah.

Block Scope vs Function Scope

if (true) {
  var a = "var bocor keluar blok";
  let b = "let terkurung di dalam blok";
}

console.log(a); // "var bocor keluar blok" — bisa diakses
console.log(b); // ReferenceError — tidak bisa diakses di luar blok

let dan const bersifat block-scoped, artinya hanya bisa diakses di dalam blok { } tempat ia dideklarasikan. var bersifat function-scoped, sehingga bisa “bocor” keluar dari blok if, for, atau while.

Hoisting

Deklarasi variabel dan fungsi di JavaScript “diangkat” ke bagian atas scope-nya sebelum kode benar-benar dijalankan — inilah yang disebut hoisting.

console.log(x); // undefined, bukan error
var x = 5;

var di-hoisting dan otomatis diberi nilai awal undefined. Sebaliknya, let dan const juga di-hoisting, tapi berada dalam temporal dead zone sampai baris deklarasinya benar-benar dijalankan.

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 5;

Kenapa const Jadi Pilihan Default

const angka = [1, 2, 3];
angka.push(4); // diperbolehkan — isi array masih bisa diubah

angka = [5, 6]; // Error — variabelnya sendiri tidak bisa diganti referensinya

const mencegah variabel diassign ulang ke nilai lain, tapi jika nilainya berupa objek atau array, isinya tetap bisa diubah. Karena itu const tidak sama dengan “tidak bisa diubah sama sekali” — ia hanya mengunci referensinya.

Closure Sekilas

Pemahaman scope juga penting untuk memahami closure — fungsi yang “mengingat” variabel dari scope tempat ia dibuat.

function buatCounter() {
  let jumlah = 0;
  return () => {
    jumlah++;
    return jumlah;
  };
}

const counter = buatCounter();
console.log(counter()); // 1
console.log(counter()); // 2

Kesimpulan

Gunakan const sebagai pilihan utama, let saat nilai memang perlu berubah, dan hindari var pada kode baru karena sifatnya yang function-scoped rawan menimbulkan bug tak terduga. Memahami hoisting dan temporal dead zone juga membantu menjelaskan error yang kadang muncul saat variabel diakses sebelum dideklarasikan.