Bagian 20: JavaScript Modules

Pada JavaScript modern, kita bisa memecah program menjadi modul untuk menjaga struktur dan keterbacaan kode. Modul membantu pengelolaan proyek yang lebih besar dan memudahkan kolaborasi tim.

JavaScript Modules memungkinkan kita memecah kode ke dalam file terpisah agar lebih rapi dan mudah dikelola.

Contoh Simulasi Modul dalam Satu File

Di bawah ini kita simulasikan dua modul: moduleA dan moduleB. Modul B mengimpor fungsi dari Modul A dan menjalankannya.

// Simulasi moduleA
const moduleA = (() => {
  const greet = (name) => `Halo, ${name}! Selamat datang di modul A.`;
  return { greet };
})();

// Simulasi moduleB
const moduleB = (() => {
  const greetUser = (user) => moduleA.greet(user) + " Ini dari modul B.";
  return { greetUser };
})();

// Menjalankan fungsi dari moduleB
const message = moduleB.greetUser("Dewi");
console.log(message);

Setelah memahami konsep modularisasi, kamu bisa mulai menggunakan import dan export secara nyata pada file JavaScript terpisah untuk proyek nyata. Pada bagian selanjutnya, kita akan mulai berinteraksi dengan elemen HTML menggunakan DOM.

Pertanyaan Umum tentang JavaScript Modules

• Apa itu JavaScript Modules? Modul JavaScript memungkinkan kamu untuk memisahkan kode ke dalam file yang terpisah untuk kemudahan pengelolaan dan penggunaan kembali.
• Bagaimana cara menggunakan module di browser? Gunakan <script type="module"> untuk mengimpor dan mengekspor kode dari file lain.
• Mengapa modul penting dalam JavaScript? Karena membantu mengurangi duplikasi, meningkatkan keterbacaan, dan membuat kode lebih mudah di-maintain.