Scope: Global, Function, dan Block

Variabel punya wilayah

Scope menentukan di mana variabel bisa diakses. Analoginya seperti gedung: variabel global seperti papan pengumuman di lobi yang bisa dibaca semua orang, variabel lokal seperti catatan di dalam ruangan tertutup yang hanya bisa dibaca penghuni ruangan itu.

Global scope

Variabel yang dideklarasikan di luar fungsi atau blok bisa diakses dari mana saja:

let namaGlobal = "Rizky";

function sapa() {
  console.log(namaGlobal); // bisa diakses
}
sapa();

Variabel global memang praktis, tapi terlalu banyak variabel global membuat kode sulit dilacak dan rawan tabrakan nama. Pakai seperlunya.

Function scope dan block scope

Variabel di dalam fungsi hanya hidup di fungsi itu:

function hitung() {
  let rahasia = 42;
  console.log(rahasia); // bisa
}
hitung();
console.log(rahasia); // ERROR: tidak dikenal di luar

Dengan let dan const, setiap blok kurung kurawal juga membuat scope sendiri (block scope):

if (true) {
  let x = 10;
  const y = 20;
}
console.log(x); // ERROR: x hanya hidup di dalam if

Shadowing: nama sama, variabel beda

Variabel dalam bisa "menutupi" variabel luar dengan nama sama:

let nama = "Global";
function tes() {
  let nama = "Lokal"; // menutupi yang global
  console.log(nama); // "Lokal"
}
tes();
console.log(nama); // "Global", tidak berubah

Keduanya variabel berbeda yang kebetulan namanya sama. Ini legal, tapi bisa membingungkan. Hindari kecuali disengaja.

Catatan teknis: var tidak mengenal block scope, ia hanya mengenal function scope. Jadi var di dalam if masih bisa diakses di luar if. Ini salah satu alasan var ditinggalkan: perilakunya tidak sesuai intuisi kebanyakan programmer.

Scope chain: mencari ke luar

Saat kode butuh variabel, JavaScript mencarinya dari scope terdalam ke luar sampai ketemu. Ini disebut scope chain:

let a = "global";

function luar() {
  let b = "luar";
  function dalam() {
    let c = "dalam";
    console.log(c); // "dalam", ketemu di sini
    console.log(b); // "luar", naik satu level
    console.log(a); // "global", naik dua level
  }
  dalam();
  // console.log(c); // ERROR: tidak bisa turun ke dalam
}
luar();

Pencarian hanya bisa ke luar, tidak bisa ke dalam. Fungsi dalam bisa membaca variabel fungsi luar, tapi tidak sebaliknya. Pemahaman ini menjelaskan kenapa closure bisa "mengingat" variabel: fungsi dalam membawa rantai scope-nya ke mana pun ia pergi.

Kesimpulan

Aturannya: deklarasikan variabel sedekat mungkin dengan tempat pemakaiannya, dan sesempit mungkin scopenya. Kode dengan scope sempit lebih mudah dipahami dan lebih aman dari efek samping.