JavaScript Academy · Pelajaran

Cara Closure Menangkap Status

Pahami lingkungan leksikal closure.

Cara Closure Menangkap Status adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa Itu Penutupan

Penutupan adalah fungsi yang dibundel bersama referensi ke variabel dari cakupan tempat fungsi tersebut didefinisikan. Fungsi dalam "mengingat" variabel tersebut bahkan setelah fungsi luar selesai dijalankan.

function outer() {
  const message = "hello";
  function inner() {
    console.log(message); // sees outer variable
  }
  inner();
}
outer(); // "hello"

Mengembalikan Fungsi Dalam

Hal menariknya terjadi saat Anda mengembalikan fungsi dalam. Fungsi tersebut tetap dapat mengakses variabel luar meskipun outer sudah selesai dijalankan.

function outer() {
  const message = "remembered";
  return function () {
    console.log(message);
  };
}
const fn = outer();
fn(); // "remembered"

Cakupan Leksikal

Penutupan bekerja karena cakupan leksikal: sebuah fungsi dapat mengakses variabel yang didefinisikan dalam cakupan yang secara fisik mengelilinginya di kode sumber, bukan di tempat fungsi tersebut dipanggil.

const x = 10;
function show() {
  console.log(x); // resolves where defined
}
function run() {
  const x = 99;
  show(); // still logs 10, not 99
}
run();

Menangkap berdasarkan Referensi

Penutupan menangkap variabel itu sendiri, bukan gambaran nilai pada satu waktu. Jika variabel berubah kemudian, penutupan akan melihat nilai barunya.

function make() {
  let count = 0;
  const get = () => count;
  count = 5; // changed after get defined
  return get;
}
console.log(make()()); // 5

Setiap Pemanggilan Membuat Cakupan Baru

Setiap pemanggilan fungsi luar membuat kumpulan variabel baru. Penutupan dari pemanggilan yang berbeda tidak berbagi keadaan.

function counter() {
  let n = 0;
  return () => ++n;
}
const a = counter();
const b = counter();
console.log(a(), a()); // 1 2
console.log(b());      // 1 (independent)

Penutupan atas Parameter

Parameter fungsi juga ditangkap. Hal ini memungkinkan Anda membangun fungsi khusus dari fungsi umum.

function adder(x) {
  return (y) => x + y;
}
const add5 = adder(5);
console.log(add5(3));  // 8
console.log(add5(10)); // 15

Jebakan Perulangan Klasik

Bug yang terkenal: penggunaan var dalam perulangan membuat semua penutupan berbagi satu variabel. Saat penutupan tersebut dijalankan, perulangan sudah selesai sehingga semuanya melihat nilai terakhir.

const fns = [];
for (var i = 0; i < 3; i++) {
  fns.push(() => i);
}
console.log(fns[0](), fns[1](), fns[2]()); // 3 3 3

Memperbaikinya dengan let

let membuat pengikatan baru pada setiap iterasi, sehingga setiap penutupan menangkap i miliknya sendiri. Inilah perbaikan modernnya.

const fns = [];
for (let i = 0; i < 3; i++) {
  fns.push(() => i);
}
console.log(fns[0](), fns[1](), fns[2]()); // 0 1 2

Penutupan Menjaga Memori Tetap Hidup

Selama penutupan masih ada, variabel yang ditangkapnya tidak dapat dikumpulkan oleh pengumpul sampah. Biasanya hal ini tidak masalah, tetapi dapat menyebabkan kebocoran jika Anda menyimpan penutupan lebih lama daripada yang diperlukan.

function make() {
  const big = new Array(3).fill("data");
  return () => big.length;
}
const f = make();
console.log(f()); // 3 - big stays in memory via f

Penutupan Ada di Mana-Mana

Panggilan balik, penangan peristiwa, setTimeout, metode larik, dan promise semuanya mengandalkan penutupan untuk mengingat konteks. Anda menggunakannya terus-menerus, sering kali tanpa menyadarinya.

function greet(name) {
  return () => console.log("Hi " + name);
}
[greet("Ada"), greet("Bob")].forEach((fn) => fn());
// Hi Ada
// Hi Bob

Memeriksa Status yang Ditangkap

Beberapa penutupan dari pemanggilan yang sama berbagi variabel yang sama-sama ditangkap, sehingga salah satunya dapat membaca apa yang ditulis oleh yang lain.

function pair() {
  let value = 0;
  return {
    set: (v) => { value = v; },
    get: () => value
  };
}
const p = pair();
p.set(42);
console.log(p.get()); // 42

Pemeriksaan Cepat

Cara penutupan menangkap status.

Ringkasan

Penutupan adalah fungsi yang disertai referensi ke cakupan tempat fungsi tersebut didefinisikan. Berkat pelingkupan leksikal, penutupan mengingat variabel luar setelah fungsi luar selesai, dengan menangkapnya berdasarkan referensi, bukan nilai. Setiap pemanggilan fungsi luar membuat cakupan yang mandiri; gunakan let untuk menghindari jebakan perulangan. Penutupan menjaga memori yang ditangkap tetap hidup dan mendukung panggilan balik di mana-mana.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Cara Closure Menangkap Status” gratis?

Ya — teks lengkap “Cara Closure Menangkap Status” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Cara Closure Menangkap Status”?

Pahami lingkungan leksikal closure. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Cara Closure Menangkap Status” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy