Coba bayangin nulis seluruh aplikasi WhatsApp di SATU file JavaScript raksasa. Logika chat, kontak, panggilan, pengaturan, notifikasi — semua jadi satu. Ribuan baris yang impossible di-maintain bareng tim. Solusinya: modules. Pisahin kode jadi file-file terpisah, masing-masing fokus satu hal, lalu saling impor cuma yang dibutuhkan. Sama kayak buku Anatomi: bab Otak, Jantung, Paru terpisah-pisah, dokter cuma baca bab yang relevan.

🤔 Kenapa baru muncul tahun 2015? JavaScript awalnya dirancang buat naruh script kecil di halaman HTML, gak antisipasi jadi bahasa app raksasa kayak sekarang. Dulu developer pake hack (CommonJS di Node, AMD di browser). ES6 Modules akhirnya kasih standar resmi yang dukung browser native — jadi bisa pakai <script type="module"> tanpa bundler.

Named Export — export beberapa hal sekaligus:

// file: matematika.js
export function tambah(a, b) {
  return a + b;
}

export function kali(a, b) {
  return a * b;
}

Named Import — ambil yang dibutuhkan:

// file: app.js
import { tambah, kali } from "./matematika.js";

console.log(tambah(3, 5)); // 8
console.log(kali(4, 2));   // 8

Default Export — satu nilai utama per file:

// file: sapa.js
export default function sapa(nama) {
  return "Halo, " + nama;
}

Default Import — bebas pilih nama:

import sapaUser from "./sapa.js";
console.log(sapaUser("Budi")); // "Halo, Budi"

Aturan penting:

• Satu file boleh punya banyak named export tapi hanya satu default export
• Named import harus menggunakan kurung kurawal { }, default import tidak
• Module file harus menggunakan <script type="module"> di HTML

🎭 Analogi sehari-hari

Modules = toko bangunan dengan kios spesialis. Kios kunci (kunci.js) cuma jual kunci. Kontraktor (app.js) datang minta import { kunci }. Tidak perlu beli semua isi toko — ambil yang dibutuhkan saja.

default export = produk andalan kios (yang paling laku, tidak perlu nyebut nama spesifik).

⚠️ Jebakan yang sering ditemui

1. Path harus relatif (./ atau ../) + ekstensi .js di browser.

import x from "matematika";        // ❌ browser tidak tahu lokasi
import x from "./matematika.js";   // ✅

2. Default import — namanya BEBAS. Named import — HARUS sama.

import Apapun from "./sapa.js";              // ✅ default
import { tambah } from "./matematika.js";    // ✅ named, harus persis
import { Tambah } from "./matematika.js";    // ❌ undefined

3. Module otomatis strict mode + variable terisolasi per file. Variabel di a.js tidak bocor ke b.js. Wajib export untuk dipakai luar.

4. Import bersifat live binding — bukan copy. Kalau modul sumber update, importer ikut lihat update.

TL;DR: Modules pisahin kode JS jadi file-file fokus, saling impor cuma yang dibutuhkan. Named export (export function ...) buat banyak utility per file — wajib import dengan nama persis. Default export (export default ...) buat satu nilai utama per file — nama import bebas. Module otomatis strict mode + scope terisolasi. Path harus relatif (./) + ekstensi .js di browser native.

🎯 Named export vs default export — pilih yang mana?

• Banyak utility/helper di satu file (math.js: add, sub, mul) → named export (export function ...)
• Satu komponen utama per file (Button.tsx, UserCard.tsx) → default export (export default ...)
• Library API public → mostly named (better for tree-shaking + IDE auto-import)
• Mau import ulang dengan nama berbeda → both work, named lebih eksplisit

Pertimbangan modern: kebanyakan project condong ke named export only (Vue/Vite, ESLint config no-default-export populer) karena: nama konsisten cross-file, IDE auto-rename works, gampang grep. Default export = "dapur" file gak perlu sama nama, tapi gampang typo (import Btun from "./Button" valid tapi salah).