Modules: import/export

Named export, default export, dynamic import.

Pahami konsepnya

ES Modules memecah kode ke berkas-berkas: export dari satu sisi, import di sisi lain. Named export: export const nama = "Ari" diimpor dengan import { nama } from "./berkas.js". Default export: export default function main() diimpor dengan nama bebas: import apapun from "./berkas.js". Satu berkas hanya punya SATU default tapi banyak named.

Import rename: import { nama as n } — berganti nama lokal. Import semua: import * as util from "./util.js" lalu util.fungsi(). Dynamic import: const modul = await import("./besar.js") — hanya dimuat saat dibutuhkan, menghasilkan Promise.

Modules punya scope sendiri — variabel tidak bocor ke global. Ini perbaikan besar dari IIFE dan script tag kaku. Di browser pakai <script type="module">; di Node.js gunakan .mjs atau "type": "module" di package.json.

Coba contoh kode

// ---- util.js ----
export const PI = 3.14159;
export function luas(r) { return PI * r * r; }
export default function sapa() { return "Halo!"; }

// ---- main.js ----
import sapa, { PI, luas } from "./util.js";
import { PI as phi } from "./util.js";
import * as util from "./util.js";

console.log(sapa(), PI, luas(7));
console.log(phi, util.luas(14));

// dynamic import
// const modul = await import("./util.js");

Default import (sapa) tanpa kurung kurawal, named import ({PI, luas}) dengan. as mengganti nama. * as util mengemas semua named ke satu objek.

Latihan singkat

Uji: default export function yang mengembalikan `Halo dari module!`.