BAB 17 — Modular Programming (ES Modules): Mengatur Kode JavaScript Agar Lebih Rapi dan Maintainable

BAB 17 — Modular Programming (ES Modules): Mengatur Kode JavaScript Agar Lebih Rapi dan Maintainable

Modular programming adalah teknik membagi kode menjadi bagian-bagian terpisah (module) yang masing-masing memiliki fungsi spesifik. Di JavaScript modern, hal ini dilakukan menggunakan ES Modules (ESM) dengan export dan import.

Modularisasi membantu meningkatkan readability, maintainability, reuse, dan kolaborasi tim.

1. Export & Import

1.1 Named Export

Named export memungkinkan kita mengekspor beberapa variabel, fungsi, atau class dari satu file.

file: utils.js

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

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

file: main.js

import { add, multiply } from './utils.js';

console.log(add(2, 3));       // 5
console.log(multiply(2, 3));  // 6

1.2 Default Export

Default export memungkinkan satu entitas utama diekspor dari sebuah file.

file: math.js

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

file: main.js

import subtract from './math.js';

console.log(subtract(5, 2)); // 3
  • Named export → bisa mengekspor banyak item, harus menggunakan nama sama saat import.
  • Default export → hanya satu item, bisa diganti nama saat import.

2. Folder Structure & Best Practices

Organisasi folder sangat penting agar project tetap bersih dan mudah dikelola.

Contoh struktur:

/project
   /modules
       utils.js
       math.js
   /components
       header.js
       footer.js
   main.js

Tips:

  • Pisahkan logic, UI, dan helper functions.
  • Gunakan folder modules atau lib untuk fungsi reusable.
  • Gunakan index.js di folder untuk meng-export semua modul sehingga import menjadi ringkas:
// modules/index.js
export { add, multiply } from './utils.js';
export { default as subtract } from './math.js';

// main.js
import { add, multiply, subtract } from './modules/index.js';

3. Manfaat Modularisasi

  1. Maintainability
    • Perubahan di satu modul tidak memengaruhi modul lain.
  2. Reusability
    • Modul dapat digunakan di beberapa project atau bagian aplikasi.
  3. Scalability
    • Lebih mudah menambah fitur tanpa membuat file raksasa.
  4. Readability
    • Struktur file yang jelas memudahkan developer baru memahami project.
  5. Collaboration
    • Beberapa developer bisa bekerja di modul berbeda tanpa konflik.
  6. Encapsulation & Scope
    • Variabel dan fungsi di modul tidak otomatis global, mencegah konflik nama.

4. Praktik Modular Programming

4.1 Modul Reusable

utils.js

export function formatDate(date) {
    return date.toISOString().split('T')[0];
}

main.js

import { formatDate } from './modules/utils.js';
console.log(formatDate(new Date())); // 2025-12-12

4.2 Modul Default + Named

config.js

export const API_URL = "https://api.example.com";
export default { env: "production" };

main.js

import config, { API_URL } from './modules/config.js';
console.log(config.env); // "production"
console.log(API_URL);    // "https://api.example.com"

4.3 Barrel File (index.js)

  • Mempermudah import banyak modul dari satu titik.
// modules/index.js
export * from './utils.js';
export { default as config } from './config.js';

// main.js
import { formatDate, config } from './modules/index.js';

5. Insight Lanjutan

  • ES Modules vs CommonJS
    • ESM: import/export, mendukung static analysis, modern browser.
    • CommonJS: require/module.exports, Node.js klasik, synchronous.
  • Lazy Loading / Dynamic Import
button.addEventListener('click', async () => {
    const { heavyFunction } = await import('./heavyModule.js');
    heavyFunction();
});
  • Mengurangi initial load dan meningkatkan performa.
  • Module Scope
    • Variabel di modul tidak global → aman dari konflik.
    • Membuat kode lebih predictable dan aman.

6. Kesimpulan

  • Modular programming adalah fondasi untuk aplikasi besar dan maintainable.
  • Named export → untuk banyak entitas, Default export → satu entitas utama.
  • Struktur folder yang rapi dan barrel file (index.js) memudahkan import.
  • Modularisasi meningkatkan: maintainability, reusability, readability, scalability, dan collaboration.
  • Kombinasi modular programming + dynamic import → performa lebih baik, kode lebih modern.

💡 Insight: Semua framework modern (React, Vue, Angular) memanfaatkan modular programming secara intensif, sehingga memahami ES Modules adalah keahlian wajib bagi developer profesional.

Related Posts