JavaScript Dasar | #7 Modul

pada tanggal


Modul JavaScript

Pengenalan Modul

Modul JavaScript adalah file yang berisi kode JavaScript yang dapat diimpor ke dalam file lain. Modul memungkinkan Anda untuk memecah kode ke dalam beberapa bagian yang lebih kecil dan terorganisir, membuatnya lebih mudah untuk dikelola dan digunakan kembali. Setiap modul memiliki lingkupnya sendiri, yang berarti variabel dan fungsi di dalam modul tidak akan bercampur dengan yang ada di luar modul, kecuali jika diekspor secara eksplisit.

Modul biasanya digunakan untuk:

  • Memecah kode besar menjadi bagian-bagian kecil dan lebih mudah dikelola.
  • Menggunakan kembali kode di berbagai tempat tanpa menyalin dan menempel.
  • Membuat library dan API yang dapat digunakan oleh modul lain.

Contoh Sederhana:


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

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

Pada contoh di atas, kita membuat sebuah file math.js yang memiliki dua fungsi: tambah dan kurang. Kedua fungsi ini diekspor sehingga bisa digunakan oleh file lain.

Ekspor dan Impor Modul

Ekspor Modul

Untuk membuat fungsi, objek, atau variabel dapat diakses dari modul lain, kita menggunakan kata kunci export. Ada dua cara utama untuk mengekspor: export named dan export default.

  • Export Named: Digunakan ketika Anda ingin mengekspor beberapa nilai dari modul.
  • Export Default: Digunakan ketika Anda ingin mengekspor satu nilai utama dari modul.
Export Named:

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

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

// modul-default.js
export default function kali(a, b) {
  return a * b;
}

Dalam modul-default.js, kita mengekspor fungsi kali sebagai ekspor default. Modul ini hanya dapat memiliki satu ekspor default.

Impor Modul

Untuk menggunakan kode yang telah diekspor dari modul lain, kita menggunakan kata kunci import. Ada dua cara utama untuk mengimpor: import named dan import default.

Import Named:

Jika modul mengekspor beberapa fungsi atau variabel, Anda dapat mengimpor salah satunya atau semuanya menggunakan import {}.


// main.js
import { tambah, kurang } from './math.js';

console.log(tambah(5, 3));  // Output: 8
console.log(kurang(5, 3));  // Output: 2
Import Default:

Untuk mengimpor modul dengan ekspor default, Anda dapat memberikan nama bebas pada fungsi atau nilai yang diimpor.


// main.js
import kali from './modul-default.js';

console.log(kali(5, 3));  // Output: 15
Import Semua Ekspor:

Jika Anda ingin mengimpor semua nilai yang diekspor oleh sebuah modul, Anda dapat menggunakan * as untuk mengimpor seluruh modul.


// main.js
import * as MathFunctions from './math.js';

console.log(MathFunctions.tambah(5, 3));  // Output: 8
console.log(MathFunctions.kurang(5, 3));  // Output: 2

Contoh Kombinasi Ekspor dan Impor:

Kita dapat menggabungkan export named dan export default dalam modul yang sama, lalu mengimpornya di file lain.


// math-combined.js
export function tambah(a, b) {
  return a + b;
}

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

Mengimpor kombinasi:


// main.js
import kali, { tambah } from './math-combined.js';

console.log(tambah(5, 3));  // Output: 8
console.log(kali(5, 3));    // Output: 15

Menggunakan import dan export

Modul JavaScript sangat berguna dalam membangun aplikasi berskala besar atau dalam pengembangan tim, di mana kode dibagi menjadi beberapa bagian untuk meningkatkan keterbacaan dan pemeliharaan. import dan export juga memungkinkan untuk memuat library eksternal, seperti React atau library lainnya.

Beberapa hal yang perlu diperhatikan saat menggunakan modul:

  • Modul JavaScript modern menggunakan ES6 import/export.
  • Browser modern mendukung modul, tetapi beberapa setup membutuhkan bundler seperti Webpack atau Parcel untuk mengelola modul di aplikasi besar.
  • File modul perlu dijalankan dengan server lokal atau melalui file:// yang mendukung CORS (Cross-Origin Resource Sharing).

Dengan modul, Anda dapat memisahkan dan mengelola kode JavaScript dengan lebih baik, membuatnya lebih mudah untuk diorganisir, dipelihara, dan digunakan kembali di seluruh aplikasi.

Komentar

Posting Komentar