Modul dalam JavaScript

Artikel ini menjelaskan modul dalam JavaScript.

YouTube Video

Modul dalam JavaScript

Modul dalam JavaScript adalah cara untuk mengatur kode dan membaginya menjadi komponen yang dapat digunakan kembali. Dengan menggunakan modul, keterbacaan dan pemeliharaan kode menjadi lebih baik, dan fungsi yang sama dapat digunakan kembali dalam proyek lain. Di sini kami menjelaskan berbagai sistem modul, mulai dari konsep modul hingga contoh penggunaan spesifik.

Konsep Modul JavaScript

JavaScript awalnya tidak memiliki sistem modular. Namun, seiring berkembangnya aplikasi menjadi lebih besar, modularisasi menjadi penting untuk membagi kode menjadi unit-unit lebih kecil agar dapat digunakan kembali. Sebuah modul adalah sepotong kode dengan fungsi tertentu yang dapat dikelola secara independen dari kode lainnya, memungkinkan untuk dibagi menjadi beberapa file.

Jenis Utama Modul

Ada beberapa sistem modul dalam JavaScript. Yang paling umum adalah ES Modules (ESM) dan CommonJS.

• ES Modules adalah sistem modul yang diperkenalkan dalam ECMAScript 2015 (ES6), yang mendefinisikan modul menggunakan kata kunci import dan export. Sistem ini banyak digunakan baik di sisi klien (browser) maupun di sisi server (Node.js).

• CommonJS adalah sistem modul yang terutama digunakan di Node.js. Modul didefinisikan menggunakan require dan module.exports untuk mengimpor dan mengekspor file.

Detail ES Modules (ESM)

ES Modules adalah sistem modul standar dalam JavaScript, memungkinkan pertukaran fungsi antar modul dengan mudah. Dalam browser dan Node.js, sistem ini digunakan untuk mendefinisikan dan mengimpor modul.

export dan import

export adalah kata kunci untuk mengekspos fungsi dari sebuah modul ke luar. import digunakan untuk memasukkan fungsi yang didefinisikan dalam modul lain.

Contoh: Ekspor Modul

Modul dapat diekspor dalam ES Modules sebagai berikut.

1// math.mjs
2export function add(a, b) {
3    return a + b;
4}
5export function subtract(a, b) {
6    return a - b;
7}

Dalam modul math.mjs ini, fungsi add dan subtract diekspor. Fungsi-fungsi ini dapat diimpor dari modul lain.

Di sini, .mjs adalah ekstensi file yang secara eksplisit menunjukkan file JavaScript dengan format ES Modules. Di Node.js, ekstensi file menentukan apakah itu CommonJS atau ES Modules. Namun, jika type: "module" ditentukan di package.json, file dengan ekstensi .js akan dianggap sebagai ES Modules secara default.

Contoh: Impor Modul

Modul dapat diimpor dalam ES Modules sebagai berikut.

1// main.mjs
2import { add, subtract } from './math.mjs';
3
4console.log(add(3, 5)); // 8
5console.log(subtract(10, 7)); // 3

Dengan cara ini, menggunakan import, Anda dapat dengan mudah memanfaatkan fungsi yang didefinisikan di file lainnya.

Ekspor Default dan Ekspor Bernama

Ada dua metode ekspor untuk modul. Satu adalah ekspor bernama, dan yang lainnya adalah ekspor default.

• Ekspor bernama digunakan ketika mengekspor beberapa fungsi atau variabel dari suatu modul. Anda dapat melakukan beberapa ekspor, dan saat impor, Anda menerimanya dengan nama yang ditentukan.

1// utils.mjs
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}

1// main.mjs
2import { sum, multiply } from './utils.mjs';
3
4console.log(sum(4, 6));       // 10
5console.log(multiply(3, 5));  // 15

• Ekspor default digunakan ketika mengekspor satu fungsi atau kelas dari sebuah modul. Saat impor, dapat diterima dengan nama apa pun.

1// greet.mjs
2export default function greet() {
3    return "Hello, World!";
4}

1// main.mjs
2import greet from './greet.mjs';
3
4console.log(greet()); // "Hello, World!"

Hanya satu ekspor default yang mungkin, tetapi ekspor bernama dapat mengekspor beberapa elemen secara bersamaan.

Contoh penggunaan di sisi klien (browser).

Contoh: Ekspor Modul

Modul dapat diekspor dalam ES Modules sebagai berikut.

1// utils.js
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}

Dalam modul utils.js ini, fungsi sum dan multiply diekspor.

Contoh: Impor Modul

Modul dapat diimpor di sisi klien sebagai berikut.

 1<!DOCTYPE html>
 2<html lang="ja">
 3<head>
 4  <meta charset="UTF-8">
 5  <title>ES Modules Sample in HTML</title>
 6</head>
 7<body>
 8  <h1>ES Modules Sample</h1>
 9  <div id="result"></div>
10
11  <script type="module">
12    import { sum, multiply } from './utils.js';
13
14    const result = `
15      <p>sum(3, 5) = ${sum(3, 5)}</p>
16      <p>multiply(10, 7) = ${multiply(10, 7)}</p>
17    `;
18
19    document.getElementById('result').innerHTML = result;
20    console.log(sum(3, 5));      // 8
21    console.log(multiply(10, 7)); // 70
22  </script>
23</body>
24</html>

• Dengan mengatur atribut type pada tag <script> menjadi module, sintaks modul ES seperti import dan export dapat digunakan di dalam HTML.
• Pernyataan import memuat utils.js eksternal dan menampilkan hasilnya.

Detail tentang CommonJS

CommonJS adalah sistem modul yang terutama digunakan dalam Node.js. Modul diekspor dan diimpor menggunakan module.exports dan require.

require dan module.exports

Dalam CommonJS, module.exports digunakan untuk mengekspor modul. Juga, require digunakan untuk memanfaatkan modul dari file lain.

Contoh: Ekspor Modul

Modul dapat diekspor dalam CommonJS sebagai berikut.

1// math.js
2module.exports = {
3    add: function(a, b) {
4        return a + b;
5    },
6    subtract: function(a, b) {
7        return a - b;
8    }
9};

Contoh: Impor Modul

Modul dapat diimpor dalam CommonJS sebagai berikut.

1// main.js
2const math = require('./math.js');
3
4console.log(math.add(4, 7));      // 11
5console.log(math.subtract(9, 2)); // 7

Di Node.js, CommonJS digunakan sebagai sistem modul default, tetapi ES Modules juga didukung.

Impor Dinamis

Dalam JavaScript, modul dapat diimpor secara dinamis menggunakan import(). Metode ini memanfaatkan pemrosesan asinkron untuk memuat modul saat diperlukan.

Impor dinamis dapat dilakukan sebagai berikut.

1async function loadModule() {
2    const math = await import('./math.js');
3    console.log(math.add(5, 3)); // 8
4}
5
6loadModule();

Impor dinamis adalah salah satu cara untuk meningkatkan performa aplikasi. Karena Anda dapat memuat modul sesuai kebutuhan alih-alih memuat semuanya pada saat awal, ini meningkatkan kecepatan tampilan halaman.

Keuntungan dari Modul

• Penggunaan Kode Ulang

  • Kode yang telah dimodularisasi dapat digunakan kembali di proyek lain. Dengan membuat modul dengan fungsi umum dan menggunakannya di berbagai aplikasi, efisiensi pengembangan dapat meningkat secara signifikan.

• Peningkatan Pemeliharaan

  • Dengan memisahkan kode menjadi modul, akan lebih mudah untuk memodifikasi fitur atau bagian tertentu. Mengelola kode dalam unit kecil membuatnya lebih mudah untuk menemukan dan memperbaiki bug.

• Menghindari Tabrakan Namespace

  • Mendefinisikan banyak variabel dan fungsi di ruang lingkup global dapat menyebabkan tabrakan nama, tetapi modularisasi mencegah hal ini dan membantu menjaga basis kode tetap bersih.

• Manajemen Ketergantungan

  • Menggunakan modul memungkinkan Anda untuk secara eksplisit mengelola ketergantungan sebuah aplikasi. Menjadi jelas modul mana yang bergantung pada modul lain, sehingga struktur kode menjadi lebih mudah dipahami.

Ringkasan

Sistem modul JavaScript adalah cara yang kuat untuk mengorganisir kode dan membaginya menjadi komponen yang dapat digunakan kembali. Dengan memahami perbedaan antara ES Modules dan CommonJS serta memilih sistem modul yang sesuai berdasarkan proyek, Anda dapat meningkatkan keterbacaan dan kemudahan pemeliharaan kode. Selain itu, dengan menggunakan impor dinamis, Anda dapat mengoptimalkan kinerja aplikasi.

Mari memanfaatkan sistem modul untuk membangun aplikasi JavaScript yang lebih skalabel dan efisien.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video