Jago JavaScript #13: Module (Bagi-Bagi Kode Biar Gak Berantakan!)

JavaScript Module memungkinkan kita untuk memecah kode menjadi file-file kecil yang terpisah. Bayangkan seperti kotak LEGO; kamu punya kotak khusus roda, kotak khusus mesin, dan kotak khusus badan mobil. Nanti, kamu tinggal "panggil" apa yang kamu butuhin buat dirakit jadi satu.

🧩 Apa yang Akan Dipelajari

Memahami konsep Export (Membagikan kode).
Memahami konsep Import (Mengambil kode).
Perbedaan Named Export dan Default Export.
Cara menghubungkan file JavaScript di HTML agar mendukung Module.

⚙️ Persiapan

Kamu butuh Visual Studio Code (atau editor teks lain).
Buat dua file: matematika.js dan main.js.
Gunakan Live Server (Extension VS Code) karena browser melarang import/export kalau cuma buka file .html secara langsung (alasan keamanan).

🚀 Langkah-Langkah

1. Persiapan di HTML

Agar browser tahu kita pakai fitur Module, kamu wajib nambahin type="module" di tag <script>.

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

2. Membagikan Kode (Export)

Ada dua cara buat pamerin kodemu ke file lain:

A. Named Export (Bisa banyak dalam satu file) Gunakan ini kalau kamu mau bagi-bagi banyak fungsi sekaligus.

// matematika.js
export const tambah = (a, b) => a + b;
export const kurang = (a, b) => a - b;
export const PI = 3.14;

B. Default Export (Cuma boleh satu per file) Gunakan ini untuk "menu utama" dari file tersebut.

// user.js
const profil = { nama: "Kay", role: "Dev" };
export default profil;

3. Mengambil Kode (Import)

Sekarang, mari kita panggil kode tadi di file utama (main.js).

// main.js

// Import yang 'Named' harus pakai kurung kurawal { }
import { tambah, PI } from './matematika.js';

// Import yang 'Default' bebas kasih nama apa aja (gak pakai { })
import dataUser from './user.js';

console.log(tambah(10, 5)); // Hasil: 15
console.log(PI);            // Hasil: 3.14
console.log(dataUser.nama); // Hasil: "Kay"

4. Import Semuanya Sekaligus (Aliasing)

Kalau fungsinya terlalu banyak, kamu bisa borong semuanya dan kasih "nama grup".

import * as MTK from './matematika.js';

console.log(MTK.tambah(2, 2));
console.log(MTK.kurang(10, 5));

💡 Tips Tambahan

Struktur Folder: Biasanya developer naruh module di folder bernama utils/, helpers/, atau components/.
Ekstensi File: Jangan lupa tulis .js di akhir alamat file saat import (misal: ./matematika.js), kalau gak ditulis, browser seringkali bingung.
Encapsulation: Kode yang gak di-export gak bakal bisa diintip dari luar. Ini bagus buat nyembunyiin logika rahasia di dalam file kamu.

❗ Troubleshooting

Masalah: Muncul error Cannot use import statement outside a module. Solusi: Kamu pasti lupa nambahin type="module" di tag <script> pada file HTML-mu. Tanpa itu, browser nganggep JavaScript kamu gaya lama yang gak kenal import/export.

🎯 Kesimpulan

Dengan Module, kamu sudah naik kelas dari "ngetik kode" jadi "arsitek kode". Kamu bisa bikin aplikasi yang besar tapi tetap rapi karena setiap fitur punya rumahnya masing-masing. Ini adalah fondasi utama sebelum kamu belajar Framework besar seperti React atau Vue!