Memahami Module, Import dan Export di JavaScript.

Module memungkinkan kode JavaScript dipecah menjadi beberapa file, masing-masing bertanggung jawab atas bagian tertentu, lalu dihubungkan lewat import dan export.

Named Export

Sebuah file bisa mengekspor lebih dari satu nilai, dengan nama yang sesuai saat diimpor.

// utilitas.js
export function formatRupiah(angka) {
  return `Rp${angka.toLocaleString("id-ID")}`;
}

export const PAJAK = 0.11;

// main.js
import { formatRupiah, PAJAK } from "./utilitas.js";

console.log(formatRupiah(150000)); // "Rp150.000"
console.log(PAJAK);                 // 0.11

Default Export

Setiap file hanya boleh punya satu default export, biasanya dipakai untuk nilai utama dari sebuah module.

// Produk.js
export default class Produk {
  constructor(nama, harga) {
    this.nama = nama;
    this.harga = harga;
  }
}

// main.js
import Produk from "./Produk.js"; // nama saat impor boleh berbeda

const sepatu = new Produk("Sepatu", 350000);

Menggabungkan Default dan Named Export

// api.js
export default function ambilData() { /* ... */ }
export const BASE_URL = "https://api.contoh.com";

import ambilData, { BASE_URL } from "./api.js";

Mengganti Nama saat Import atau Export

export { formatRupiah as formatHarga };

import { formatHarga as formatUang } from "./utilitas.js";

Import Semua Sebagai Satu Objek

import * as Utilitas from "./utilitas.js";

console.log(Utilitas.formatRupiah(200000));
console.log(Utilitas.PAJAK);

Dynamic Import

Untuk memuat module hanya saat dibutuhkan (misalnya demi mempercepat waktu muat awal halaman), gunakan import() dalam bentuk fungsi yang mengembalikan Promise.

async function muatFiturChart() {
  const { renderChart } = await import("./chart.js");
  renderChart();
}

tombolLihatChart.addEventListener("click", muatFiturChart);

Dynamic import sangat umum dipakai dalam teknik code splitting di aplikasi modern, agar kode yang jarang dipakai tidak ikut termuat di awal.

Kesimpulan

Named export cocok untuk file yang mengekspor banyak nilai kecil, sedangkan default export cocok untuk nilai utama sebuah module seperti class atau komponen. Dynamic import melengkapi keduanya untuk kasus di mana sebagian kode baru perlu dimuat belakangan, menjadikan module system ES6 fondasi penting dalam struktur aplikasi JavaScript modern berskala besar.