Saat ini, JavaScript memainkan peran besar dalam pengembangan situs web. Pengembang front-end menggunakan JavaScript untuk membuat aplikasi web interaktif. Akibatnya, ada peningkatan permintaan untuk pengembang JavaScript.
Tentu saja, JavaScript telah berkembang selama bertahun-tahun. ES6 memperkenalkan banyak fitur baru ke bahasa tersebut. Salah satunya adalah cara mudah berbagi kode di antara file JavaScript.
Fungsi impor dan ekspor untuk JavaScript adalah fitur baru yang akan menjadikan Anda pengembang yang lebih baik. Berikut cara kerja fitur ini.
Apa itu Modul JavaScript?
Modul JavaScript adalah file JavaScript yang berisi kumpulan kode untuk Anda gunakan. Modul biasanya ditulis dalam file terpisah dan diimpor menggunakan impor kata kunci. Ini menghemat waktu dan tenaga karena Anda dapat menggunakannya kembali nanti.
Misalnya, jika Anda memiliki fungsi bernama hitungJumlah(), Anda dapat memasukkannya ke dalam file lain dan membuatnya tersedia di mana saja dalam proyek Anda menggunakan ekspor Dan impor Fungsi JavaScript tanpa ribut-ribut.
Salah satu manfaat menggunakan modul adalah membantu menjaga kode Anda tetap teratur. Itu juga membuat kode Anda lebih mudah dikelola dan lebih mudah untuk di-debug.
Untuk menggunakan file JavaScript sebagai modul, Anda perlu membuat skrip di dokumen HTML Anda dengan a ketik = "modul".
<jenis skrip="modul" src="namaberkas.js"></script>
Ada dua jenis modul:
- Modul ECMAScript: modul JavaScript standar dan didukung oleh semua browser utama.
- Modul CommonJS: lebih tua, dan tidak didukung secara luas.
Kami akan fokus pada Modul ECMAScript di sini. Jika perlu, lihat kami pengantar JavaScript untuk memoles dasar-dasarnya.
Cara Mengekspor Fungsi di JavaScript
Dalam JavaScript, fungsi adalah objek kelas satu yang dapat diteruskan sebagai argumen selain digunakan sendiri. Mengekspor fungsi adalah cara yang baik untuk mentransfernya ke program lain. Ini juga digunakan saat Anda ingin membuat pustaka yang dapat digunakan kembali.
Mengekspor fungsi dalam JavaScript dilakukan dengan menggunakan ekspor fungsi. Itu ekspor fungsi mengekspor fungsi yang diberikan untuk digunakan oleh file atau skrip lain. Dengan mengekspor fungsi kita sendiri, kita dapat dengan bebas menggunakannya di file atau skrip lain tanpa mengkhawatirkan masalah lisensi.
Ada dua cara untuk menggunakan ekspor berfungsi secara efisien. Kami akan membahas ini dengan contoh kode.
Misalkan Anda memiliki file getPersonalDetails.js yang memiliki fungsi yang mengembalikan nama lengkap pengguna setelah input cepat. Fungsinya terlihat seperti ini:
fungsigetFullName(nama lengkap){
nama lengkap = prompt('Apa nama depan Anda');
menghibur.log (nama lengkap);
}
- Anda dapat mengekspor fungsi ini hanya dengan menggunakan ekspor kata kunci diikuti dengan nama fungsi dalam kurung kurawal. Ini terlihat seperti ini:
ekspor {getFullName}; - Cara kedua adalah dengan menambahkan ekspor kata kunci sesaat sebelum mendeklarasikan fungsi.
eksporfungsigetFullName (nama lengkap){...}
Anda dapat mengekspor beberapa fungsi dengan menggunakan metode pertama. Ini dilakukan dengan memasukkan nama fungsi yang diinginkan di kurung kurawal. Fungsi dipisahkan dengan koma.
Misalnya: Misalkan Anda memiliki tiga fungsi di file kami getPersonalDetails.js mengajukan - getFullName(),getEmail(), getDob(). Anda dapat mengekspor fungsi dengan menambahkan baris kode berikut:
ekspor {getFullName, getEmail, getDob};
Cara Mengimpor Fungsi di JavaScript
Untuk menggunakan modul, Anda harus mengimpornya terlebih dahulu. Fungsi apa pun dapat diimpor menggunakan referensi jalur lengkap.
Mengimpor fungsi cukup mudah. JavaScript memiliki fitur bawaan untuk mengimpor fungsi Anda sendiri dari file lain. Jika Anda ingin mengakses fungsi tersebut dari modul lain, sebaiknya sertakan deklarasi fungsi untuk setiap utilitas Anda.
Fungsi yang akan diimpor sudah diekspor dalam file aslinya.
Anda dapat mengimpor fungsi dari file lain menggunakan impor fungsionalitas kata kunci. Impor memungkinkan Anda untuk memilih bagian mana dari file atau modul yang akan dimuat.
Inilah cara Anda mengimpor kami getFullName berfungsi dari getPersonalDetails.js:
impor {getFullName} dari './getPersonalDetails.js'Ini akan membuat fungsi ini tersedia untuk digunakan dalam file kita saat ini.
Untuk mengimpor banyak fungsi, fungsi yang akan diimpor disertakan dalam kurung kurawal. Masing-masing dipisahkan oleh koma (,).
impor {getFullName, getEmail, getDob} dari './getPersonalDetails.js'Ada cara lain untuk menggunakan impor Kegunaan. Ini memungkinkan kami untuk mengimpor semua ekspor dalam file tertentu. Itu dilakukan dengan menggunakan impor * sebagai sintaksis.
Anda dapat mengimpor semua ekspor di kami getPersonalDetails.js dengan menambahkan baris kode berikut:
impor * sebagai personalDetailsModule dari './getPersonalDetails.js'Di atas akan membuat objek yang disebut personalDetailsModule.
Ini hanya nama variabel, Anda bisa menamainya apa saja.
Objek ini berisi semua ekspor di file kami getPersonalDetails.js. Fungsi disimpan dalam objek ini dan dapat diakses dengan cara Anda mengakses properti objek apa pun.
Sebagai contoh, Kita dapat mengakses getFullName fungsi dengan menambahkan baris kode berikut
personalDetailsModule.getFullName();Apa Itu Default Ekspor?
Standar ekspor adalah fungsi ekspor yang luar biasa. Ini digunakan jika hanya satu variabel yang diekspor dari file. Itu juga digunakan untuk membuat nilai fallback untuk file atau modul.
Di bawah ini adalah contoh di mana kami menggunakan the getFullName berfungsi sebagai default:
eksporbawaanfungsigetFullName (nama lengkap){...}Anda tidak dapat memiliki lebih dari satu nilai sebagai default di setiap modul atau file.
Fungsi yang digunakan sebagai default diimpor secara berbeda. Inilah cara mengimpor kami getFullName fungsi yang digunakan sebagai default:
impor nama lengkap dari './getPersonalDetails.js'Inilah perbedaannya:
- Tidak ada kurung kurawal di sekitar nilai yang diimpor, nama lengkap.
- nama lengkap di sini hanya nama variabel. Ini menyimpan nilai dari apa pun fungsi defaultnya.
Tingkatkan Fungsi JavaScript Anda
Modul JavaScript adalah potongan kode yang dapat digunakan kembali di bagian lain dari kode Anda, menggunakan fungsi impor dan ekspor JavaScript. Mereka biasanya ditulis dalam file terpisah, dan diimpor menggunakan kata kunci impor. Salah satu manfaat menggunakan modul adalah membantu menjaga kode Anda tetap teratur. Itu juga membuat kode Anda lebih mudah dikelola dan lebih mudah untuk di-debug.
