ES6 Module: import dan export

Kode yang terorganisir

Saat aplikasi membesar, satu file raksasa jadi mimpi buruk. ES Module memungkinkan kode dipecah ke banyak file yang saling terhubung lewat import dan export.

export: membagikan dari file

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

export function kurang(a, b) {
  return a - b;
}

export const PI = 3.14;

Ini named export: tiap item diekspor dengan namanya.

import: memakai di file lain

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

console.log(tambah(2, 3)); // 5
console.log(PI); // 3.14

Nama import harus sama dengan nama export, kecuali di-rename:

import { tambah as add } from "./matematika.js";
import * as mtk from "./matematika.js"; // semua sekaligus
console.log(mtk.kurang(5, 2)); // 3

Default export: satu andalan per file

Tiap modul boleh punya satu default export, biasanya untuk "produk utama" file itu:

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

// file: app.js
import kalkulator from "./kalkulator.js"; // nama bebas

Default export di-import tanpa kurung kurawal dan namanya bebas ditentukan pengimpor.

Memakai di browser

Di HTML, script module butuh type="module":

<script type="module" src="app.js"></script>

Module otomatis bersifat deferred (jalan setelah HTML di-parse) dan punya scope sendiri: variabel di satu module tidak bocor ke module lain atau ke global.

Catatan teknis: ES Module di browser butuh disajikan lewat HTTP(S), tidak bisa dibuka via file:// langsung karena aturan CORS. Pakai Live Server di VS Code atau npx serve untuk development lokal. Aturan path juga ketat: "./matematika.js" wajib pakai ./ dan ekstensi .js tidak boleh dihilangkan.

Struktur proyek contoh

Bayangkan aplikasi kecil dengan tiga file yang rapi:

// api.js: urusan data
export async function ambilUser(id) {
  let res = await fetch("https://jsonplaceholder.typicode.com/users/" + id);
  return res.json();
}

// ui.js: urusan tampilan
export function tampilkanUser(user) {
  document.querySelector("#nama").textContent = user.name;
}

// app.js: merangkai semuanya
import { ambilUser } from "./api.js";
import { tampilkanUser } from "./ui.js";

ambilUser(1).then(tampilkanUser);

Tiap file punya satu tanggung jawab: api.js tidak tahu soal DOM, ui.js tidak tahu soal fetch. Kalau API berubah, yang diubah cuma api.js. Pemisahan seperti ini membuat tim bisa kerja paralel tanpa tabrakan dan bug lebih mudah dilokalisasi.

Kesimpulan

export untuk berbagi, import untuk memakai. Mulai biasakan memecah kode per fitur atau per tanggung jawab sejak dini. Ini fondasi arsitektur aplikasi modern dan framework seperti React atau Vue.