Cara Mengimpor dan Mengekspor Fungsi di JavaScript

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 untuk berbagi kode dengan mudah di antara file JavaScript.

Fungsi impor dan ekspor untuk JavaScript adalah fitur baru yang akan membuat Anda menjadi pengembang yang lebih baik. Berikut cara kerja fitur-fitur tersebut.


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 yang disebut hitungJumlah()Anda dapat memasukkannya ke dalam file lain dan membuatnya tersedia di mana saja di proyek Anda menggunakan ekspor dan impor Fungsi JavaScript tanpa keributan.

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 jenis = “modul”.

<script type="module" src="fileName.js"></script>

Ada dua jenis modul:

  1. Modul ECMAScript: modul JavaScript standar dan didukung oleh semua browser utama.
  2. Modul CommonJS: lebih tua, dan tidak didukung secara luas.
See also  4 Paket Logging Efisien untuk Go Apps Anda

Kami akan fokus pada Modul ECMAScript di sini. Jika perlu, lihat pengantar JavaScript kami untuk mempelajari dasar-dasarnya.

Cara Mengekspor Fungsi dalam 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 ketika Anda ingin membuat perpustakaan yang dapat digunakan kembali.

Mengekspor fungsi dalam JavaScript dilakukan dengan menggunakan ekspor fungsi. Itu ekspor fungsi mengekspor fungsi tertentu untuk digunakan oleh file atau skrip lain. Dengan mengekspor fungsi kami sendiri, kami dapat dengan bebas menggunakannya di file atau skrip lain tanpa khawatir tentang 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 prompt. Fungsinya terlihat seperti ini:

function getFullName(fullName){
fullName = prompt('What is your First Name');

console.log(fullName);
}

  1. Anda dapat mengekspor fungsi ini hanya dengan menggunakan ekspor kata kunci diikuti dengan nama fungsi dalam kurung kurawal. Ini terlihat seperti ini:
    export {getFullName};
  2. Cara kedua adalah dengan menambahkan ekspor kata kunci sebelum mendeklarasikan fungsi.
    export function getFullName (fullName){...}

Anda dapat mengekspor beberapa fungsi dengan menggunakan metode pertama. Ini dilakukan dengan memasukkan nama-nama fungsi yang diinginkan dalam kurung kurawal. Fungsi dipisahkan dengan koma.

Sebagai contoh: Misalkan Anda memiliki tiga fungsi dalam getPersonalDetails.js mengajukan – getFullName(), dapatkan email(), getDob(). Anda dapat mengekspor fungsi dengan menambahkan baris kode berikut:

export {getFullName, getEmail, getDob};

See also  Pengantar Singkat Bahasa V

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 yang berbeda menggunakan impor fungsionalitas kata kunci. Impor memungkinkan Anda memilih bagian mana dari file atau modul yang akan dimuat.

Inilah cara Anda mengimpor getFullName fungsi dari getPersonalDetails.js:

import {getFullName} from './getPersonalDetails.js'

Ini akan membuat fungsi ini tersedia untuk digunakan dalam file kita saat ini.

Untuk mengimpor beberapa fungsi, fungsi yang akan diimpor disertakan dalam kurung kurawal. Masing-masing dipisahkan dengan koma (,).

import {getFullName, getEmail, getDob} from './getPersonalDetails.js'

Ada cara lain untuk menggunakan impor Kegunaan. Ini memungkinkan kita 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:

import * as personalDetailsModule from './getPersonalDetails.js'

Di atas akan membuat objek yang disebut PersonalDetailsModul.

Ini hanya nama variabel, Anda bisa menamainya apa saja.

Objek ini berisi semua ekspor di . kami getPersonalDetails.js. Fungsi disimpan dalam objek ini dan dapat diakses dengan cara Anda mengakses properti objek apa pun.

Misalnya, Kami dapat mengakses getFullName fungsi dengan menambahkan baris kode berikut

personalDetailsModule.getFullName();

See also  Cara Membuat Mode Gelap di React Tanpa Menggunakan Konteks React

Apa itu Default Ekspor?

Ekspor default adalah fungsi ekspor yang luar biasa. Ini digunakan jika hanya satu variabel yang diekspor dari file. Ini juga digunakan untuk membuat nilai fallback untuk file atau modul.

Di bawah ini adalah contoh di mana kami menggunakan getFullName berfungsi sebagai default:

export default function getFullName (fullName){...}

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:

import fullName from './getPersonalDetails.js'

Berikut perbedaannya:

  1. Tidak ada kurung kurawal di sekitar nilai yang diimpor, nama lengkap.
  2. nama lengkap di sini hanya nama variabel. Ini menyimpan nilai 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 import. 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.