JavaScript Modules

📌 Elements

💡 Dasar Modul JavaScript

Modul adalah cara untuk memecah kode menjadi file terpisah yang dapat diimpor dan diekspor. Ini membantu dalam mengorganisir kode dan menghindari polusi namespace global.

math-module.js

          
            // Ekspor tunggal (default export)

            const add = (a, b) => a + b;

            export default add;

            // Ekspor bernama (named export)

            export const subtract = (a, b) => a - b;

            export const multiply = (a, b) => a * b;

            export const divide = (a, b) => a / b;

📝 Penjelasan Detail:

• export default - Ekspor utama dari modul
• export - Ekspor bernama (bisa banyak per modul)
• import - Untuk mengimpor fungsi/variabel dari modul lain
• type="module" - Atribut script untuk menggunakan modul
• File modul memiliki scope sendiri (variabel tidak global)

🛠️ Features

app.js

          
            // Impor default export

            import add from './math-module.js';

            // Impor named exports

            import { subtract, multiply } from './math-module.js';

            // Impor semua named exports sebagai namespace

            import * as math from './math-module.js';

            // Impor dengan alias

            import { divide as div } from './math-module.js';

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

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

ℹ️ Keuntungan Modul

Modul membantu dalam: maintainability kode, menghindari naming collisions, lazy loading, dan dependency management yang lebih baik.

📊 Basic Tables

module-syntax.js

          
            // Ekspor

            export default function foo() {} // Default export

            export const bar = 42; // Named export

            export { bar, baz }; // Ekspor multiple

            export { bar as myBar }; // Ekspor dengan alias

            // Impor

            import foo from 'module'; // Impor default

            import { bar } from 'module'; // Impor named

            import { bar as myBar } from 'module'; // Impor dengan alias

            import * as module from 'module'; // Impor semua

            import 'module'; // Impor untuk side effects saja

📝 Penjelasan Detail:

• Default export - Hanya satu per modul, bisa berupa fungsi/class/variabel
• Named exports - Bisa banyak, harus menggunakan kurung kurawal saat impor
• Alias - Berguna ketika ada konflik nama atau ingin memberi nama berbeda
• Impor semua sebagai namespace berguna saat banyak ekspor dari modul
• Side effects - Modul dijalankan sekali saat pertama kali diimpor

🚀 Advanced Table

dynamic-modules.js

          
            // Dynamic Imports (lazy loading)

            const loadModule = async () => {

              const module = await import('./math-module.js');

              console.log(module.add(2, 3));

            };

            // Re-export (aggregating modules)

            export { add, subtract } from './math-module.js';

            export { default as Calculator } from './calc-module.js';

            // Worker Modules

            const worker = new Worker('./worker.js', {

              type: 'module'

            });

ℹ️ Fitur Lanjutan Modul

Dynamic imports memungkinkan lazy loading modul. Re-export berguna untuk membuat modul aggregator. Worker modules memungkinkan penggunaan modul di web workers.

💡 Pro Tips

🎯 Best Practices Modul

Gunakan default export untuk ekspor utama modul, kelompokkan modul terkait, dan gunakan dynamic imports untuk optimasi performa.

module-tips.js

          
            // ✅ Good - Struktur modul yang jelas

            // math.js

            export const add = (a, b) => a + b;

            export const subtract = (a, b) => a - b;

            export default { add, subtract }; // Ekspor objek sebagai default

            // ❌ Avoid - Terlalu banyak default export

            export default function add() {}

            export default function subtract() {} // Error!

            // ✅ Better - Dynamic import untuk code splitting

            const loadFeature = async () => {

              if (featureNeeded) {

                const feature = await import('./heavy-feature.js');

                feature.init();

              }

            };

📝 Penjelasan Detail:

• Gunakan default export dengan bijak - Untuk ekspor utama modul saja
• Kelompokkan modul terkait - Modul sebaiknya fokus pada satu fungsionalitas
• Gunakan named exports - Untuk utilitas dan fungsi pendukung
• Hindari side effects - Modul sebaiknya pure dan predictable
• Manfaatkan dynamic imports - Untuk optimasi performa aplikasi besar
• Gunakan alias - Ketika ada konflik nama atau ingin meningkatkan readability

🌐 Info

📚 Tools untuk Modul JavaScript

Beberapa tools populer untuk bekerja dengan modul: Webpack, Rollup, Parcel (bundler), Babel (transpiler), dan ESLint (linting).

📝 Sumber Belajar Lanjutan:

• MDN JavaScript Modules - Dokumentasi resmi Mozilla
• ES Modules Spec - Spesifikasi ECMAScript untuk modul
• Webpack Documentation - Panduan penggunaan bundler modul
• Tree Shaking - Teknik optimasi untuk menghapus kode tidak terpakai
• Module Design Patterns - Pola desain untuk struktur modul