Saat aplikasi kita berkembang menjadi lebih besar, maka kode yang kita miliki akan semakin kompleks. Agar lebih mudah dikelola, kita perlu memecah file JavaScript tersebut menjadi beberapa file yang disebut module.

Module adalah file Javascript yang di dalamnya terdapat value dari objects, functions, dan variables. File tersebut dapat diexport ke file lain, sehingga file lain yang mengimportnya dapat menggunakan values yang ada di file tersebut.

Export and Import

Export digunakan untuk meng-export function, variable, object atau semua yang ada dalam satu module untuk kemudian di import ke module yang lain, sedangkan import digunakan untuk menggunakan values dari module yang sudah di-export.

Untuk bisa menghubungkan module antar JavaScript, module pada Javascript membutuhkan penghubung antar satu module dengan module yang lain yaitu export dan import.

Penggunaan export diawali dengan kata kunci export kemudian diikuti oleh nama variabel yang ingin di-export, sedangkan penggunaan import diawali dengan kata kunci import diikuti oleh nama variabel yang di-import.

Berikut ini contoh melakukan export dan import antar module profile.js dan main.js.

Export satu-satu:

filename: profile.js

Import satu-satu:

filename: main.js

Export semua

Kita juga bisa melakukan export secara terpisah untuk semua kode yang ingin kita export seperti contoh di bawah ini:

filename: profil.js

Import semua (import *)

Biasanya, kita membuat daftar apa yang akan kita impor di dalam kurung kurawal import {...}, tetapi jika ada banyak yang harus diimport, kita dapat melakukan import semuanya sebagai sebuah object menggunakan import * as <obj>. 

filename: main.js

Export As dan Import As

Jika kita merasa nama variabel data atau function yang ingin kita export maupun import terlalu panjang atau sulit untuk diingat, kita tidak perlu mengubah nama pada data aslinya, karena kita dapat memberi alias (nama pengganti) pada nama data yang ingin kita export maupun import.

Berikut ini contoh penggunaan export as dan import as antar module profile.js dan main.js.

Export dengan nama/alias:

Kita dapat memberi alias pada nama variabel di suatu tipe data, objek, ataupun function yang ingin di-export dengan menggunakan export as. Jadi nanti di module yang mengimportnya yang digunakan adalah nama alias (nama penggantinya).


Kita bisa lihat contoh di bawah ini menggunakan export as:

filename: profil.js

Import dengan nama/alias:

Tidak hanya dapat memberi alias pada data yang di-export, kita juga dapat memberi alias pada saat melakukan import data menggunakan import as.

Contoh menggunakan import as:

filename: main.js

Export default

Export default digunakan untuk mengekspor satu modul, variabel, ekspresi, atau fungsi dari file JavaScript. Jadi hanya satu default export per module.

Biasanya digunakan untuk  mengeskport module yang mendeklarasikan sebuah entitas, misalnya modul user.js hanya mengeksport class User.

Jika kita menggunakan export default maka ketika import kita tidak perlu menggunakan kurung kurawal { } dan kita juga dapat menggunakan nama yang berbeda.

Berikut ini contoh penggunaan export default pada module user.js dan mengimportnya ke module main.js.

Export default:

filename: user.js

Import:

Jika kita menggunakan export default, curly braces {} dapat dihilangkan saat import.

filename: main.js

Kita juga dapat menggunakan nama yang berbeda saat import.

SELESAI.

Referensi:

https://skilvul.com/courses/javascript-intermediate/
https://devsaurus.com/javascript-module