Belajar JavaScript Module: Konsep, Alasan, dan Implementasi

Apa Itu JavaScript Module?

Dalam pengembangan aplikasi JavaScript modern, pengorganisasian kode menjadi sangat penting. Di sinilah konsep JavaScript Module berperan. Module memungkinkan Anda untuk membagi kode menjadi bagian-bagian terpisah yang dapat digunakan kembali dan dikelola dengan lebih baik.

JavaScript Module adalah berkas JavaScript yang mengekspor dan/atau mengimpor nilai atau fungsionalitas dari/ke modul lain menggunakan sintaks export dan import. Ini membantu memisahkan logika program ke dalam file yang berbeda sehingga kode menjadi lebih terstruktur, mudah diuji, dan dipelihara.

Kenapa Menggunakan Module?

• Organisasi Kode: Memisahkan kode menjadi modul membuat struktur proyek lebih rapi dan mudah dipahami.
• Reusabilitas: Fungsi atau class dapat digunakan di berbagai tempat tanpa menduplikasi kode.
• Namespace Terpisah: Variabel dalam modul tidak bocor ke global scope, sehingga menghindari konflik nama.
• Pemeliharaan Lebih Mudah: Mengisolasi fitur dalam modul membuat debugging dan pengembangan lebih efisien.

Implementasi Dasar JavaScript Module

Berikut contoh implementasi modul di JavaScript menggunakan export dan import. Dalam JavaScript, Anda dapat mengekspor berbagai jenis data seperti fungsi, variabel, class, dan object dari satu file modul agar bisa digunakan di file lain.

📁 File: mathUtils.js

// Export fungsi dari modul
export function tambah(a, b) {
  return a + b;
}

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

📁 File: main.js

// Import fungsi dari modul lain
import { tambah, kali } from './mathUtils.js';

console.log("Penjumlahan: ", tambah(2, 3));  // Output: 5
console.log("Perkalian: ", kali(4, 5));      // Output: 20

Catatan penting: untuk menggunakan import/export, Anda harus menjalankan file JavaScript sebagai module.

Menjalankan JavaScript Module di Browser

Saat menggunakan module di HTML, Anda harus menambahkan atribut type="module" pada elemen <script>:

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

Fitur Tambahan Module

• export default: digunakan untuk mengekspor satu nilai utama dari sebuah modul.
• Module dieksekusi hanya sekali, lalu cache hasilnya untuk digunakan kembali.
• Path file module harus relatif dan berakhiran .js.

Contoh Export Default

// utils.js
export default function halo(nama) {
  return `Halo, ${nama}`;
}

// main.js
import halo from './utils.js';
console.log(halo("Andi"));

Dengan memanfaatkan module, Anda bisa membangun aplikasi JavaScript yang lebih besar, lebih aman, dan lebih terstruktur dengan baik.

Export Multiple

Anda bisa mengekspor beberapa fungsi, variabel, atau class sekaligus dari satu file modul menggunakan export secara individual atau bersamaan.

Contoh: export individual

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

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

Contoh: export bersamaan

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

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

export { tambah, kurang };

Import-nya:

import { tambah, kurang } from './operasi.js';
console.log(tambah(4, 2));

Alias pada Import/Export

Kadang nama fungsi/variabel dalam modul terlalu panjang atau bentrok. Dengan as, kita bisa memberi alias baik saat export maupun import.

Contoh: export dengan alias

// file: util.js
function hitungLuas(p, l) {
  return p * l;
}

export { hitungLuas as luasPersegiPanjang };

Contoh: import dengan alias

// file: app.js
import { luasPersegiPanjang as hitung } from './util.js';

console.log(hitung(5, 4)); // Output: 20

Aggregating Module

Kadang kita ingin membuat satu modul utama yang menggabungkan dan mengekspor ulang isi dari modul-modul lain. Ini disebut module aggregation.

📁 File: math.js

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

📁 File: string.js

export function kapital(teks) {
  return teks.toUpperCase();
}

📁 File: index.js (modul aggregator)

export * from './math.js';
export * from './string.js';

📁 File: app.js

import { tambah, kapital } from './index.js';

console.log(tambah(2, 3));      // 5
console.log(kapital("halo"));  // HALO

Aggregating module sangat berguna untuk membuat public API dari pustaka JavaScript yang besar.

Kesimpulan

JavaScript Module adalah cara yang efektif untuk mengorganisasi kode dalam aplikasi web dengan memisahkan fungsi, variabel, class, dan objek ke dalam file terpisah yang dapat digunakan kembali.Dengan modul, pengembang dapat menulis kode yang lebih terstruktur, mudah dipelihara, dan dapat diatur dengan baik, serta menghindari konflik penamaan di ruang lingkup global.Fitur seperti export multiple, penggunaan alias, dan aggregating module memberikan fleksibilitas dalam mengelola dan menggabungkan modul-modul sesuai kebutuhan proyek. Memahami dan menerapkan JavaScript Module merupakan langkah penting untuk membangun aplikasi modern yang scalable dan modular.