🎨

Frontend Fundamentals

Kursus Gratis — Fullstack Talent

12

Hukum Rimba JS: Scope, Hoisting & Closures

📖 20 menit baca 🏷️ Advanced Konsep JS

Selamat datang di area abu-abu di mana 90% Programmer Pemula menyerah saat belajar JavaScript! Banyak bug misterius (variabel meledak, nilai tiba-tiba undefined) terjadi karena coder tersebut tidak memahami 3 Hukum Rimba utama JS:

1. Scope (Cakupan Wilayah): Batas wilayah di mana variabelmu berhak hidup.
2. Hoisting (Pengangkatan): Kelakuan aneh JS yang memindahkan deklarasi ke paling atas secara ghaib.
3. Closures (Koper Rahasia): Kemampuan fungsi untuk "Mengingat" data masa lalunya meskipun fungsinya sudah beres dijalankan.

🌍 1. Scope (Wilayah Kekuasaan)

Dalam JavaScript, variabel tidak bisa diakses dari sembarang tempat. Mereka tunduk pada hukum Wilayah (Scope) tempat mereka diciptakan. Ada 3 tingkat hierarki wilayah:

🌎

Global Scope (Semesta)

Variabel yang dibuat di luar fungsi apapun (di alam bebas). Dapat diakses/diubah oleh siapa saja dari ujung atas sampai ujung bawah file. Hati-hati, ini sangat rawan bentrok nama!

let rajaDunia = "Semua orang mengenalku!";
🏰

Function / Local Scope (Kerajaan)

Variabel yang lahir di DALAM fungsi. Anggap saja sebagai rahasia kerajaan: orang dalam tahu, tapi orang luar kerajaan akan ERROR undefined jika memaksa masuk memanggilnya.

function rahasiaIstana() { let hartaKarun = 999; } console.log(hartaKarun); // ❌ ERROR Jempalitan!
Hanya ES6 Let/Const
📦

Block Scope (Kurungan/Kardus)

Segala hal yang diapit oleh kurung kurawal { ... }, seperti rantai if/else dan for loop. Variabel let dan const terkurung ketat di dalamnya (Sedangkan var jadul masih bisa bocor keluar kardus!).

👻 2. Mesin Pengangkat Roh (Hoisting)

Logika manusia berkata: "Kita harus membuat variabel dulu, baru boleh memanggilnya." Tapi Mesin JavaScript kuno (sebelum ES6) punya bug fitur yang aneh: ia merenggut roh deklarasi variabel dan membawanya terbang ke baris paling atas!

❌ Tragedi "var" Kuno

console.log( hantu ); // Hasil Logika: ERROR (krn hantu blm dibuat) // Hasil Asli JS: 'undefined' 🤔 var hantu = "Wooo!"; // --------- PENJELASAN JS MESIN: -------- // JS diam-diam mengubah kodemu menjadi: var hantu; // Roh ditarik ke pucuk (Hoisted) console.log( hantu ); // Karena blm ada isi = undefined hantu = "Wooo!"; // Isinya tetap di bawah

✅ Diselamatkan "let & const"

console.log( agenModern ); // Hasil: ReferenceError Asli! (Program Mati) let agenModern = "Aman!"; // --------- PENJELASAN JS MESIN: -------- // ES6 menyadari kebodohan Hoisting di masa lalu. // let/const TETAP ditarik ke atas (hoisted), // TETAPI mereka dikunci dalam Zona Kematian // yang disebut Temporal Dead Zone (TDZ). // Kamu DILARANG menyentuhnya sebelum dia diisi.

Selain Variabel, Pendelegasian Function Declaration function halo(){} juga ditarik utuh 100% ke atas langit. Itulah kenapa kamu bisa memanggil Fungsi (menjalankannya) di baris 1, padahal fungsinya baru kamu tulis di baris 500 terbawah filemu!

🔒 3. Sang Pengingat Masa Lalu: Closures

Ini adalah Jurus Masterpiece JavaScript. Closure adalah kondisi ketika sebuah Fungsi Anaak (di dalam Fungsi Induk) Mengingat dan membawa kabur variabel milik sang Induk dalam sebuah koper gaib, walaupun sang Induk sudah beres bekerja dan diusir dari Memory RAM!

function buatMesinPenghitung() { // 1. Variabel Privat Induk let angkaMisteri = 0; // 2. Closure (Fungsi Anak) yg akan "mengingat" angkaMisteri return function() { angkaMisteri += 1; return angkaMisteri; } } // Sang Induk dieksekusi SEKALI, lalu selesai/mati! const konterAnak = buatMesinPenghitung(); // Sang Anak dipanggil berkali-kali: console.log( konterAnak() ); // Output: 1 console.log( konterAnak() ); // Output: 2 console.log( konterAnak() ); // Output: 3

Mengapa Ini Ajaib? 🤯

Secara hukum alam JS (Scope), jika fungsi Induk buatMesin() sudah dieksekusi, maka variabel angkaMisteri (0) di dalamnya seharusnya **DIBUNUH / DIMUSNAHKAN** dari memory RAM.

Tapi karena sang Anak (konterAnak) masih butuh data tersebut, sang Anak "menyelundupkan" angkaMisteri tersebut ke dalam tas ghaibnya (Closure). Hasilnya: Kamu memiliki sebuah Angka yang tersembunyi tak bisa disentuh dari luar (Privat), yang hanya bisa ditambah jika kamu memanggil fungsi Anak! (Inilah rahasia pembuatan Game Score/Saldo Bank).