Modular JavaScript: Cara Kerja import & export untuk Kode Lebih Rapi

Seiring bertambahnya ukuran proyek, kode JavaScript bisa menjadi panjang dan sulit dikelola. Alih-alih menulis ribuan baris dalam satu file script.js, kamu bisa memecahnya menjadi beberapa modul, tiap file punya tanggung jawabnya sendiri. Untuk itu dalam tutorial kali ini kita akan bahas tentang Modular JavaScript: Cara Kerja import & export untuk Kode Lebih Rapi.

Dengan pendekatan modular:

• Kode jadi lebih terstruktur

• Reuse (penggunaan ulang) lebih mudah

• Lebih gampang untuk debugging dan maintenance

Apa Itu Modul di JavaScript?

Modul (module) adalah file JavaScript yang berisi potongan kode yang bisa digunakan di file lain. Kita bisa mengekspor (export) data atau fungsi dari satu file, lalu mengimpornya (import) ke file lain.

Contoh sederhana:

 js/
 ┣  math.js
 ┗  main.js

export — Membagikan Fungsi atau Variabel

Ada dua cara utama mengekspor di JavaScript:
(a) named export, dan (b) default export.

a. Named Export

// math.js
export const PI = 3.14;

export function tambah(a, b) {
  return a + b;
}

b. Default Export

// hitung.js
export default function kali(a, b) {
  return a * b;
}

import — Mengambil Data dari File Lain

Setelah di-export, data atau fungsi bisa diambil dengan import.

a. Import Named Export

// main.js
import { PI, tambah } from './math.js';

console.log("Nilai PI:", PI);
console.log("Hasil tambah:", tambah(4, 6));

b. Import Default Export

import kali from './hitung.js';

console.log("Hasil kali:", kali(3, 5));

c. Mengubah Nama saat Import

import { tambah as penjumlahan } from './math.js';
console.log(penjumlahan(10, 20));

Menggabungkan Named dan Default Export

Kamu bisa gunakan keduanya dalam satu file:

// utils.js
export const appName = "Belajar Modular JS";
export default function greet(name) {
  return `Halo, ${name}!`;
}

Lalu:

// main.js
import greet, { appName } from './utils.js';

console.log(appName);
console.log(greet("Arvian"));

Cara Menjalankan Modular JavaScript di Browser

Agar browser mengenali file modular, tambahkan type="module" pada tag <script>:

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

Catatan:

• Pastikan kamu menggunakan server lokal (bukan file:///), karena import/export butuh protokol HTTP.

• Misalnya gunakan Live Server di VSCode.

Struktur Folder Modular

Contoh struktur modular untuk proyek JavaScript kecil:

 js/
 ┣  app.js          → file utama
 ┣  helpers.js      → fungsi utilitas
 ┣  storage.js      → fungsi localStorage
 ┣  ui.js           → fungsi manipulasi DOM
 ┗  data.js         → data statis atau konfigurasi

Lalu di app.js:

import { saveData, loadData } from './storage.js';
import { tampilPesan } from './ui.js';

const data = loadData() || [];
tampilPesan(`Data yang tersimpan: ${data.length}`);

Studi Kasus Mini: Modul Hitung Diskon

// diskon.js
export function hitungDiskon(harga, persen) {
  return harga - (harga * persen / 100);
}

// main.js
import { hitungDiskon } from './diskon.js';

const harga = 100000;
const total = hitungDiskon(harga, 10);

console.log(`Harga setelah diskon 10%: Rp${total}`);

Kesimpulan

Konsep	Kegunaan
export	Membagikan variabel/fungsi dari modul
import	Mengambil variabel/fungsi dari modul lain
type="module"	Diperlukan agar browser mengenali kode modular

Dengan Modular JavaScript, kamu bisa membuat proyek besar lebih terorganisir, mudah dikembangkan, dan lebih bersih dari duplikasi kode.