### Modul JavaScript: Import dan Export
Pada JavaScript, **modul** adalah file yang berisi kode yang dapat di-*import* atau di-*export* antara satu file dengan file lainnya. Modul memungkinkan kita untuk memecah kode menjadi beberapa bagian yang lebih kecil, terorganisir, dan dapat digunakan kembali, serta mempermudah manajemen proyek besar.
Sebelum ES6, JavaScript tidak memiliki sistem modul secara native. Namun, dengan ES6, sistem modul menjadi standar, dan memungkinkan pengembang untuk meng-*import* dan men-*export* kode antara file JavaScript.
### 1. **Export (Ekspor)**
Fitur **`export`** digunakan untuk mendefinisikan bagian mana dari file (modul) yang dapat diakses dari luar. Ada dua cara untuk melakukan ekspor dalam JavaScript: **export named** dan **export default**.
#### a) **Export Named**
Export named memungkinkan kita untuk mengekspor beberapa variabel, fungsi, atau class dari satu modul. Untuk menggunakan ini, kita hanya menambahkan kata kunci `export` sebelum deklarasi.
##### Contoh:
```javascript
// file: kalkulator.js
export function tambah(a, b) {
return a + b;
}
export function kali(a, b) {
return a * b;
}
```
Pada contoh di atas, kita mengekspor dua fungsi, `tambah` dan `kali`. Fungsi-fungsi ini dapat digunakan di file lain dengan cara di-*import*.
#### b) **Export Default**
Export default digunakan ketika kita ingin mengekspor satu nilai utama dari sebuah modul. Modul hanya bisa memiliki **satu** export default.
##### Contoh:
```javascript
// file: hewan.js
export default class Hewan {
constructor(nama) {
this.nama = nama;
}
suara() {
return `${this.nama} mengeluarkan suara`;
}
}
Di sini, kita mengekspor class `Hewan` sebagai **default export**. File ini hanya bisa mengekspor satu elemen default.
### 2. **Import (Impor)**
Untuk menggunakan kode yang diekspor dari file lain, kita menggunakan fitur **`import`**. Sama seperti export, ada dua cara untuk meng-*import* kode: import named dan import default.
#### a) **Import Named**
Ketika menggunakan `export named`, kita bisa meng-*import* beberapa fungsi, variabel, atau class dari modul lain dengan menyebutkan namanya secara eksplisit di dalam kurung kurawal `{}`.
##### Contoh:
```javascript
// file: app.js
import { tambah, kali } from './kalkulator.js';
console.log(tambah(2, 3)); // Output: 5
console.log(kali(2, 3)); // Output: 6
```
Pada contoh di atas, kita meng-*import* fungsi `tambah` dan `kali` dari file `kalkulator.js`. Nama fungsi yang di-*import* harus sama persis dengan nama yang diekspor.
#### b) **Import Default**
Jika modul menggunakan **export default**, kita bisa meng-*import* tanpa menggunakan kurung kurawal `{}`, dan kita bisa memberikan nama yang berbeda pada elemen yang di-*import*.
##### Contoh:
```javascript
// file: app.js
import Hewan from './hewan.js';
let kucing = new Hewan("Kucing");
console.log(kucing.suara()); // Output: Kucing mengeluarkan suara
```
Di sini, kita meng-*import* class `Hewan` dari file `hewan.js`. Karena `Hewan` diekspor sebagai default, kita tidak perlu menggunakan kurung kurawal, dan kita bisa memberikan nama apapun saat mengimpornya.
#### c) **Menggabungkan Import Named dan Default**
Kita bisa menggabungkan default import dan named import dalam satu pernyataan `import`.
##### Contoh:
```javascript
// file: app.js
import Hewan, { tambah, kali } from './hewanKalkulator.js';
console.log(tambah(2, 3)); // Output: 5
let kucing = new Hewan("Kucing");
console.log(kucing.suara()); // Output: Kucing mengeluarkan suara
```
Pada contoh di atas, kita meng-*import* default `Hewan` sekaligus men-*import* named `tambah` dan `kali`.
### 3. **Re-export (Ekspor Ulang)**
Dalam beberapa kasus, kita mungkin ingin men-*export* kembali (re-export) modul yang di-*import* dari modul lain, tanpa mengubahnya. Ini bisa dilakukan menggunakan `export` tanpa mendefinisikan ulang fungsi atau class.
##### Contoh:
```javascript
// file: operasiDasar.js
export { tambah, kali } from './kalkulator.js';
```
Di sini, kita meng-*import* dan langsung mengekspor ulang fungsi `tambah` dan `kali` dari file `kalkulator.js` dalam file `operasiDasar.js`. File lain sekarang bisa meng-*import* fungsi-fungsi ini dari `operasiDasar.js`.
### 4. **Import Semua sebagai Objek**
Jika kita ingin meng-*import* semua ekspor named dari sebuah modul sebagai satu objek, kita bisa menggunakan sintaks `* as`.
##### Contoh:
```javascript
// file: app.js
import * as Kalkulator from './kalkulator.js';
console.log(Kalkulator.tambah(2, 3)); // Output: 5
console.log(Kalkulator.kali(2, 3)); // Output: 6
```
Pada contoh di atas, kita meng-*import* semua ekspor dari `kalkulator.js` dan menempatkannya dalam objek `Kalkulator`. Sekarang kita bisa mengakses fungsi-fungsi tersebut melalui objek `Kalkulator`.
### 5. **Dynamic Import**
JavaScript ES2020 memperkenalkan fitur **dynamic import** yang memungkinkan modul di-*import* secara dinamis ketika diperlukan, bukan di awal file. Ini sangat berguna untuk **lazy loading** dalam aplikasi besar.
##### Contoh Dynamic Import:
```javascript
// file: app.js
document.getElementById('tombol').addEventListener('click', () => {
import('./kalkulator.js').then(Kalkulator => {
console.log(Kalkulator.tambah(2, 3)); // Output: 5
});
});
```
Pada contoh ini, modul `kalkulator.js` hanya akan di-*import* saat pengguna mengklik tombol. Ini menghemat sumber daya dengan hanya memuat kode yang dibutuhkan.
### Kesimpulan
Sistem modul JavaScript dengan **import** dan **export** membantu kita memisahkan kode ke dalam bagian-bagian yang lebih modular dan terorganisir. Dengan menggunakan **export named**, **export default**, dan **import** yang tepat, kita dapat mengembangkan aplikasi yang lebih mudah dipelihara dan digunakan kembali. Fitur seperti **dynamic import** juga sangat membantu dalam optimasi aplikasi besar.