Closures — JavaScript

Bayangin kamu pinjem buku dari perpus, terus pas keluar bawa juga catatan kecil yang kamu tulis selama baca di sana. Walaupun perpus udah tutup (function luar…

Fungsi di JavaScript boleh dibuat di dalam fungsi lain. Fungsi dalam itu tetap ingat variabel di sekitarnya, bahkan setelah fungsi luarnya selesai jalan. Dengan cara ini kamu bisa bikin penghitung, pabrik fungsi, dan data yang gak bisa diubah dari luar.

🧪 Tebakan cepat: a dan b dibuat dari fungsi yang sama. Kalau a dinaikkan dua kali, b ikut jadi 2 atau tetap 0? Tebak dulu, jawabannya ada di bagian "Fungsi yang ingat variabelnya".

Fungsi yang ingat variabelnya

function makeCounter() {
  let count = 0;

  return {
    inc: () => ++count,
    peek: () => count,
  };
}

const a = makeCounter();
const b = makeCounter();

a.inc();
a.inc();
console.log(a.peek()); // 2
console.log(b.peek()); // 0
console.log(a.count);  // undefined

let count = 0 adalah variabel di dalam makeCounter.
makeCounter mengembalikan object berisi dua fungsi kecil. inc menjalankan ++count: naikkan count satu, lalu kembalikan nilai barunya (panggilan pertama 1, kedua 2). peek cuma membaca count.
makeCounter() sudah selesai jalan, tapi inc dan peek masih bisa memakai count.
Tiap panggilan makeCounter() bikin count baru. a dan b punya hitungan masing-masing, jadi b tetap 0.
a.count hasilnya undefined. count gak bisa dibaca dari luar, cuma lewat inc dan peek.

Daerah tempat sebuah variabel bisa dipakai disebut scope. Fungsi yang tetap ingat scope luarnya, tempat dia dibuat, namanya closure. Patokannya: fungsi ingat variabel di sekitar tempat dia ditulis, dan tiap kali fungsi luarnya dipanggil, variabel itu dibuat baru.

Fungsi yang mengembalikan fungsi

function buatSapa(salam) {
  return function (nama) {
    return salam + ", " + nama + "!";
  };
}

const sapaPagi = buatSapa("Selamat pagi");
const sapaMalam = buatSapa("Selamat malam");

console.log(sapaPagi("Budi"));         // Selamat pagi, Budi!
console.log(sapaMalam("Ani"));         // Selamat malam, Ani!
console.log(buatSapa("Halo")("Rina")); // Halo, Rina!

buatSapa gak mengembalikan teks, tapi sebuah fungsi. sapaPagi adalah fungsi itu, siap dipanggil nanti.
Fungsi dalamnya ingat salam dari panggilan yang membuatnya, jadi sapaPagi dan sapaMalam masing-masing punya salam sendiri.
buatSapa("Halo")("Rina"): kurung pertama bikin fungsinya, kurung kedua langsung memanggilnya.

Method yang berbagi satu variabel

function buatKeranjang() {
  const isi = [];

  return {
    masukkan(barang) {
      isi.push(barang);
    },
    jumlah() {
      return isi.length;
    },
  };
}

const k = buatKeranjang();
k.masukkan("buku");
k.masukkan("pensil");
console.log(k.jumlah()); // 2
console.log(k.isi);      // undefined

masukkan(barang) { ... } adalah cara singkat menulis method di dalam object.
Dua method itu dibuat di dalam buatKeranjang, jadi dua-duanya memakai isi yang sama.
Dari luar, k.isi gak ada, jadi keranjangnya cuma bisa diubah lewat masukkan. Kalau isi disimpan sebagai properti object, siapa pun bisa menimpanya.

⚠️ Jebakan yang sering ketemu

Variabel ditaruh di luar fungsi pembuatnya. Semua fungsi hasilnya jadi berbagi satu variabel, dan yang dibuat terakhir menimpa yang lain. Pakai parameter atau let di dalam fungsi pembuatnya.
Lupa return fungsi dalamnya. buatSapa("Halo") jadi undefined, dan buatSapa("Halo")("Rina") error karena undefined gak bisa dipanggil.
= padahal maksudnya +=. total = n cuma menyimpan angka terakhir. total += n menumpuk.

🔬 Coba sendiri

Alat di bawah berisi pola closure lain, dari penghitung privat sampai bug loop klasik. Pilih satu, lalu lihat variabel apa yang diingat closure-nya.

TL;DR: Closure adalah fungsi yang tetap ingat variabel dari scope tempat dia dibuat, walaupun fungsi luarnya sudah selesai jalan. Tiap panggilan fungsi luar bikin variabel baru, jadi makeCounter() dua kali menghasilkan dua hitungan terpisah. Pakai ini buat fungsi yang mengembalikan fungsi (buatSapa("Halo")("Rina")) dan buat data yang cuma bisa diubah lewat method-nya sendiri.