JavaScript Modules: Menyusun Kode Lebih Rapi dan Terstruktur

Ketika proyek JavaScript mulai membesar, kita membutuhkan cara untuk memecah kode menjadi bagian-bagian kecil agar lebih mudah dikelola. Inilah fungsi utama dari JavaScript Modules.

Dengan module, kamu bisa memisahkan fungsi, variabel, atau class ke dalam file berbeda, lalu mengimpornya saat dibutuhkan. Ini membuat kode lebih modular, reusable, dan terorganisir.

🧱 Apa Itu Module?

Secara sederhana:

Module adalah file JavaScript terpisah yang mengekspor nilai tertentu dan dapat diimpor oleh file lain.

Sebelum ES6, developer menggunakan solusi seperti IIFE atau CommonJS (di Node.js). Kini, JavaScript sudah mendukung module secara native menggunakan import dan export.

🚪 Cara Mengekspor (Export)

Ada dua cara:

1. Named Export

Kamu bisa mengekspor banyak hal dari satu file.

1// file: utils.js
2export const tambah = (a, b) => a + b;
3export const kali = (a, b) => a * b;
4

1// file: utils.js
2export const tambah = (a, b) => a + b;
3export const kali = (a, b) => a * b;
4

2. Default Export

Hanya satu nilai yang bisa diekspor secara default.

1// file: salam.js
2export default function() {
3  console.log("Halo, selamat datang!");
4}
5

1// file: salam.js
2export default function() {
3  console.log("Halo, selamat datang!");
4}
5

🚚 Cara Mengimpor (Import)

Mengimpor Named Export

Gunakan {} sesuai nama yang diekspor:

1// file: app.js
2import { tambah, kali } from './utils.js';
3
4console.log(tambah(2, 3)); // 5
5

1// file: app.js
2import { tambah, kali } from './utils.js';
3
4console.log(tambah(2, 3)); // 5
5

Mengimpor Default Export

Tanpa {}, dan kamu bisa beri nama bebas:

1// file: app.js
2import salam from './salam.js';
3
4salam(); // Halo, selamat datang!
5

1// file: app.js
2import salam from './salam.js';
3
4salam(); // Halo, selamat datang!
5

Mengimpor Semua Sekaligus

1import * as utils from './utils.js';
2
3console.log(utils.tambah(2, 3)); // 5
4

1import * as utils from './utils.js';
2
3console.log(utils.tambah(2, 3)); // 5
4

⚙️ Menggunakan Module di HTML

Untuk menjalankan module di browser, kamu harus menambahkan type="module" di <script>:

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

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

Perlu diingat: file JavaScript module harus dijalankan dari server (localhost atau live server), bukan langsung dari file system (file://).

📦 Kenapa Module Penting?

✅ Kode lebih rapi dan terorganisir ✅ Mudah digunakan kembali di proyek lain ✅ Menghindari konflik nama variabel atau fungsi ✅ Mendukung sistem pengelolaan dependensi modern (seperti bundler dan framework)

🧠 Kesimpulan

JavaScript Modules adalah pondasi utama dalam membangun aplikasi yang besar dan terstruktur. Dengan memahami konsep import dan export, kamu bisa mulai membagi kode ke dalam bagian-bagian kecil yang mudah dipelihara.

Setelah menyelesaikan bagian JavaScript Modern (ES6+), kini kamu siap memasuki bagian akhir dari tutorial ini: Tools dan Ekosistem JavaScript, yang akan memperkenalkanmu pada praktik dan alat-alat profesional yang sering digunakan oleh para developer JavaScript.