Pembuatan dan Penggunaan Modul JavaScript

Redaksi PetiknetMinggu, 5 Maret 2023 | 21:00 WIB
Pembuatan dan Penggunaan Modul JavaScript
Pembuatan dan Penggunaan Modul JavaScript

export const myVariable = ‘This is a variable';

export function myFunction() {
console.log(‘This is a function');
}

Dalam contoh di atas, variabel “myVariable” dan fungsi “myFunction” di-export untuk digunakan di file lainnya.

Mengimport Variabel dan Fungsi

// file: main.js

import { myVariable, myFunction } from './myModule.js';

console.log(myVariable); // This is a variable
myFunction(); // This is a function

Dalam contoh di atas, variabel “myVariable” dan fungsi “myFunction” diimpor secara terpisah dari modul “myModule.js”.

Mengexport Fungsi Default

// file: myModule.js

export default function() {
  console.log('This is a default function');
}

Dalam contoh di atas, sebuah fungsi default di-export untuk digunakan di file lainnya.

Mengimport Fungsi Default

// file: main.js

import myFunction from './myModule.js';

myFunction(); // This is a default function

Dalam contoh di atas, fungsi default dari modul “myModule.js” diimpor menggunakan kata kunci “import” dan dipanggil di dalam file “main.js”.

Perlu diperhatikan bahwa karena ini adalah fungsi default, kita dapat memberinya nama apapun saat mengimpor fungsi tersebut.

Namun, disarankan untuk memberikan nama yang sama dengan nama fungsi yang didefinisikan dalam modul untuk mempermudah pemahaman kode.

Selain itu, perlu diingat bahwa hanya satu fungsi default yang diizinkan di setiap modul. Namun, kita dapat mengekspor banyak fungsi dan variabel secara terpisah dalam satu modul.

// file: myModule.js

export const greeting = 'Hello World!';

export function sayHello(name) {
  console.log(`Hello ${name}!`);
}

export default function() {
  console.log('This is a default function from myModule.js');
}

Dalam contoh di atas, modul “myModule.js” mengekspor tiga fungsi, satu di antaranya adalah fungsi default. Ketika mengimpor fungsi default dari modul ini, kita dapat memberinya nama apapun yang kita inginkan.

// file: main.js

import myModule, { greeting, sayHello } from './myModule.js';

console.log(greeting); // Hello World!
sayHello('John'); // Hello John!
myModule(); // This is a default function from myModule.js

Dalam contoh di atas, variabel “greeting” dan fungsi “sayHello” diimpor secara terpisah, sedangkan fungsi default diimpor sebagai variabel “myModule”. Kemudian, ketiga fungsi tersebut dipanggil di dalam file “main.js”.

Kesimpulan

Dalam artikel ini, kita telah membahas cara mengimport fungsi default dari modul JavaScript dan beberapa hal yang perlu diperhatikan saat menggunakan fungsi default.