JavaScript Academy · Pelajaran

Pola Modul (IIFE)

Enkapsulasikan kode dengan fungsi yang langsung dipanggil.

Pola Modul (IIFE) adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Masalah yang Diselesaikan Pola Modul

Sebelum modul ES, pola modul memungkinkan Anda menggabungkan status dan perilaku yang saling berkaitan sambil menjaga bagian internal tetap privat dan membuka antarmuka publik yang bersih. Pola ini dibangun berdasarkan penutupan.

IIFE

IIFE (Ekspresi Fungsi yang Segera Dipanggil) adalah fungsi yang dijalankan tepat ketika didefinisikan. Membungkusnya dalam tanda kurung lalu memanggilnya akan langsung membuat cakupan privat.

const result = (function () {
  return 42;
})();
console.log(result); // 42

Mengapa Menjalankannya Segera

IIFE memberi Anda cakupan privat sekali pakai tanpa meninggalkan fungsi bernama yang tidak diperlukan. Semua yang ada di dalamnya terisolasi dari ruang nama global.

(function () {
  const temp = "not global";
  console.log(temp);
})();
// temp is unreachable out here

Mengembalikan Antarmuka Publik

Pola modul adalah IIFE yang mengembalikan objek. Metode objek tersebut merupakan penutupan atas variabel privat dan membentuk antarmuka publik.

const counter = (function () {
  let count = 0; // private
  return {
    inc: () => ++count,
    value: () => count
  };
})();
counter.inc();
console.log(counter.value()); // 1

Privat dan Publik

Segala sesuatu yang dideklarasikan di dalam tetapi tidak dikembalikan akan tetap privat. Hanya hal yang Anda masukkan ke objek yang dikembalikan yang dapat diakses.

const calc = (function () {
  const pi = 3.14159; // private constant
  return {
    area: (r) => pi * r * r
  };
})();
console.log(calc.area(2)); // 12.56636
console.log(calc.pi);      // undefined

Pembantu Privat

Fungsi pembantu dapat berada di dalam modul, digunakan oleh metode publik, tetapi tidak pernah dibuka.

const validator = (function () {
  const clean = (s) => s.trim().toLowerCase(); // private
  return {
    isEmail: (s) => clean(s).includes("@")
  };
})();
console.log(validator.isEmail(" A@B.com ")); // true

Pola Modul yang Mengungkapkan

Varian populer ini mendefinisikan semua fungsi secara privat, lalu mengembalikan objek yang "mengungkapkan" referensi ke fungsi publik. Pola ini membuat daftar antarmuka publik tetap jelas di bagian bawah.

const store = (function () {
  let items = [];
  function add(x) { items.push(x); }
  function count() { return items.length; }
  return { add, count }; // reveal
})();
store.add("a");
console.log(store.count()); // 1

Instans Tunggal

Karena IIFE dijalankan sekali, sebuah modul pada dasarnya merupakan instans tunggal: tepat satu instans dengan satu kumpulan status privat.

const config = (function () {
  let settings = { theme: "dark" };
  return {
    get: (k) => settings[k],
    set: (k, v) => { settings[k] = v; }
  };
})();
config.set("theme", "light");
console.log(config.get("theme")); // "light"

Meneruskan Dependensi

Anda dapat meneruskan variabel global atau modul lain sebagai argumen IIFE, sehingga dependensi menjadi eksplisit dan minifikasi yang aman dapat dilakukan.

const mathUtils = (function (M) {
  return { roundUp: (n) => M.ceil(n) };
})(Math);
console.log(mathUtils.roundUp(4.1)); // 5

Menghindari Pencemaran Global

Inti dari pola ini adalah menggunakan satu nama global, yaitu modul, alih-alih puluhan variabel yang berdiri sendiri. Hal ini mencegah benturan nama antar-skrip.

Hubungan dengan Modul ES

Saat ini, import/export menyediakan cakupan modul yang sebenarnya pada tingkat bahasa dan sebagian besar menggantikan pola ini. Namun, memahami modul IIFE memperjelas cara kerja privasi dan enkapsulasi, dan Anda masih akan menjumpainya dalam kode lama.

Pemeriksaan Cepat

Pola modul dan IIFE.

Ringkasan

Pola modul menggunakan IIFE untuk membuat cakupan privat, lalu mengembalikan objek yang metode-metodenya merupakan penutupan atas status tersembunyi. Bagian internal tetap privat; hanya anggota yang dikembalikan yang bersifat publik. Varian seperti pola modul yang mengungkapkan memperjelas antarmuka, dan modul bertindak sebagai instans tunggal. import/export ES kini menggantikan pola tersebut, tetapi tetap dibangun berdasarkan gagasan yang sama.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pola Modul (IIFE)” gratis?

Ya — teks lengkap “Pola Modul (IIFE)” 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 “Pola Modul (IIFE)”?

Enkapsulasikan kode dengan fungsi yang langsung dipanggil. 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 3 dari 4.

Berapa lama pelajaran “Pola Modul (IIFE)” 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