Hoisting: Deklarasi yang Diangkat

Kode yang "naik" sendiri

Hoisting adalah perilaku JavaScript di mana deklarasi variabel dan fungsi seolah "diangkat" ke atas scopenya sebelum kode dijalankan. Ini menjelaskan kenapa kode berikut tidak error:

sapa(); // bisa dipanggil sebelum definisi!

function sapa() {
  console.log("Halo!");
}

Function declaration di-hoisting sepenuhnya, jadi bisa dipakai sebelum baris definisinya.

var di-hoisting setengah

Deklarasi var diangkat, tapi assignment-nya tidak. Hasilnya variabel bernilai undefined sebelum baris assignment:

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

Ini membingungkan: tidak error tapi nilainya undefined. Bug seperti ini sulit dilacak karena tidak ada pesan error yang jelas.

let dan const: ada zona larangan

let dan const juga di-hoisting secara teknis, tapi mereka punya Temporal Dead Zone (TDZ): mengaksesnya sebelum deklarasi langsung error.

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

Error yang jelas sebenarnya lebih baik daripada undefined yang diam-diam salah. Inilah salah satu alasan let/const lebih aman daripada var.

Catatan teknis: Function expression (const f = function() {}) mengikuti aturan variabelnya: tidak bisa dipakai sebelum baris definisi karena const punya TDZ. Hanya function declaration yang benar-benar bisa dipanggil lebih dulu.

Praktik terbaik

Meski hoisting memungkinkan, jangan andalkan. Selalu deklarasikan variabel dan fungsi sebelum dipakai. Kode yang urutannya logis lebih mudah dibaca dan tidak bergantung pada perilaku implisit bahasa.

Model mental: dua fase eksekusi

Cara termudah memahami hoisting: JavaScript menjalankan kodemu dalam dua fase. Fase pertama (creation) mendaftarkan semua deklarasi, fase kedua (execution) menjalankan baris per baris.

console.log(typeof sapa); // "function", sudah terdaftar di fase 1
console.log(typeof x);    // "undefined", var terdaftar tapi belum diisi

function sapa() {}
var x = 5;

Di fase creation, function declaration disimpan lengkap dengan isinya, var didaftarkan dengan nilai undefined, sedangkan let/const didaftarkan tapi dikunci (TDZ) sampai baris deklarasinya dieksekusi.

Model dua fase ini menjelaskan semua perilaku "aneh" tadi tanpa harus menghafal kasus per kasus. Dan seperti nasihat sebelumnya: tulis kode seolah hoisting tidak ada, definisikan sebelum dipakai.

Kesimpulan

Hoisting menjelaskan perilaku "aneh" JavaScript di balik layar. Pahami konsepnya untuk debugging, tapi tulis kode seolah hoisting tidak ada: definisikan dulu, pakai kemudian.