Modul JavaScript

Dalam tutorial ini, Anda akan belajar tentang modul dalam JavaScript dengan bantuan contoh.

Saat program kita tumbuh lebih besar, program itu mungkin berisi banyak baris kode. Alih-alih meletakkan semuanya dalam satu file, Anda dapat menggunakan modul untuk memisahkan kode dalam file terpisah sesuai fungsinya. Ini membuat kode kami terorganisir dan lebih mudah dipelihara.

Module adalah file yang berisi kode untuk melakukan tugas tertentu. Sebuah modul dapat berisi variabel, fungsi, kelas, dll. Mari kita lihat contoh,

Misalkan, sebuah file bernama greet.js berisi kode berikut:

 // exporting a function export function greetPerson(name) ( return `Hello $(name)`; )

Nah, untuk menggunakan kode greet.js di file lain, Anda bisa menggunakan kode berikut:

 // importing greetPerson from greet.js file import ( greetPerson ) from './greet.js'; // using greetPerson() defined in greet.js let displayName = greetPerson('Jack'); console.log(displayName); // Hello Jack

Sini,

• The greetPerson()fungsi dalam greet.js diekspor menggunakan exportkata kunci

   export function greetPerson(name) (… )

• Kemudian, kami mengimpor greetPerson()file lain menggunakan importkata kunci. Untuk mengimpor fungsi, objek, dll., Anda perlu membungkusnya ( ).

   import ( greet ) from '/.greet.js';

Catatan : Anda hanya dapat mengakses fungsi, objek, dll. Yang diekspor dari modul. Anda perlu menggunakan exportkata kunci untuk fungsi tertentu, objek, dll. Untuk mengimpornya dan menggunakannya di file lain.

Ekspor Beberapa Objek

Dimungkinkan juga untuk mengekspor beberapa objek dari modul. Sebagai contoh,

Di file module.js

 // exporting the variable export const name = 'JavaScript Program'; // exporting the function export function sum(x, y) ( return x + y; )

Di file utama,

 import ( name, sum ) from './module.js'; console.log(name); let add = sum(4, 9); console.log(add); // 13

Sini,

 import ( name, sum ) from './module.js';

Ini mengimpor variabel nama dan sum()fungsi dari file module.js .

Mengganti nama impor dan ekspor

Jika objek (variabel, fungsi, dll.) Yang ingin Anda impor sudah ada di file utama Anda, program mungkin tidak berfungsi seperti yang Anda inginkan. Dalam hal ini, program mengambil nilai dari file utama, bukan dari file yang diimpor.

Untuk menghindari konflik penamaan, Anda dapat mengganti nama fungsi, objek, dll. Selama ekspor atau selama impor.

1. Ganti nama di modul (file ekspor)

 // renaming import inside module.js export ( function1 as newName1, function2 as newName2 ); // when you want to use the module // import in the main file import ( newName1, newName2 ) from './module.js';

Di sini, saat mengekspor fungsi dari file module.js , nama baru (di sini, newName1 & newName2) diberikan ke fungsi. Oleh karena itu, saat mengimpor fungsi itu, nama baru digunakan untuk mereferensikan fungsi itu.

2. Ubah nama di file impor

 // inside module.js export ( function1, function2 ); // when you want to use the module // import in the required file with different name import ( function1 as newName1, function2 as newName2 ) from './module.js';

Di sini, saat mengimpor fungsi, nama baru (di sini, newName1 & newName2) digunakan untuk nama fungsi. Sekarang Anda menggunakan nama baru untuk mereferensikan fungsi ini.

Ekspor Default

Anda juga dapat melakukan ekspor default modul. Sebagai contoh,

Di file greet.js :

 // default export export default function greet(name) ( return `Hello $(name)`; ) export const age = 23;

Kemudian saat mengimpor, Anda dapat menggunakan:

 import random_name from './greet.js';

Saat melakukan ekspor default,

• random_name diimpor dari greet.js. Karena, random_nametidak dalam greet.js, ekspor default ( greet()dalam hal ini) diekspor sebagai random_name.
• Anda dapat langsung menggunakan ekspor default tanpa menyertakan tanda kurung kurawal ().

Catatan : File dapat berisi banyak ekspor. Namun, Anda hanya dapat memiliki satu ekspor default dalam sebuah file.

Modul Selalu gunakan Mode Ketat

Secara default, modul dalam mode ketat. Sebagai contoh,

 // in greet.js function greet() ( // strict by default ) export greet();

Manfaat Menggunakan Modul

• Basis kode lebih mudah dipelihara karena kode berbeda yang memiliki fungsi berbeda ada di file berbeda.
• Membuat kode dapat digunakan kembali. Anda dapat menentukan modul dan menggunakannya berkali-kali sesuai kebutuhan Anda.

Penggunaan impor / ekspor mungkin tidak didukung di beberapa browser. Untuk mempelajari lebih lanjut, kunjungi Dukungan impor / ekspor JavaScript.