Daftar Isi

PETIK.NET | JavaScript telah menjadi salah satu bahasa pemrograman yang paling banyak digunakan di dunia saat ini. Dalam bahasa pemrograman ini, modul adalah sebuah file JavaScript yang berisi kode yang dapat digunakan kembali dan dikelola secara terpisah. Dalam artikel ini, kami akan membahas tentang pembuatan dan penggunaan modul JavaScript serta cara mengexport dan mengimport modul tersebut.

Pembuatan Modul JavaScript

Untuk membuat modul JavaScript, cukup buat file JavaScript biasa dan simpan dengan ekstensi .js. Dalam file tersebut, Anda dapat menulis kode JavaScript sesuai dengan kebutuhan Anda.

// 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');
}

// 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, file JavaScript “myModule.js” berisi tiga fungsi yang didefinisikan menggunakan kata kunci “export”. Fungsi “greeting” dan “sayHello” akan diekspor secara terpisah, sementara fungsi default akan diekspor sebagai satu-satunya fungsi default di dalam modul.

Penggunaan Modul JavaScript

Setelah membuat modul JavaScript, Anda dapat menggunakannya di dalam file JavaScript lainnya menggunakan perintah “import”. Anda dapat mengimpor modul secara keseluruhan atau hanya beberapa fungsi tertentu yang terdapat dalam modul tersebut.

// 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

// 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, file “main.js” mengimpor tiga fungsi dari modul “myModule.js”. Fungsi “greeting” dan “sayHello” diimpor secara terpisah, sedangkan fungsi default diimpor sebagai variabel “myModule”.

Mengexport dan Mengimport Modul

Untuk mengexport dan mengimport modul dalam JavaScript, kita dapat menggunakan kata kunci “export” dan “import” seperti yang telah dijelaskan sebelumnya. Berikut adalah cara penggunaan kata kunci tersebut:

Mengexport Variabel dan Fungsi

// file: myModule.js

export const myVariable = 'This is a variable';

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

// file: myModule.js

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 JavaScript 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

// 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');
}

// 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 JavaScript lainnya.

Mengimport Fungsi Default

// file: main.js

import myFunction from './myModule.js';

myFunction(); // This is a default function

// 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');
}

// 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

// 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.

Dengan memahami konsep ini, kita dapat membuat kode JavaScript yang lebih modular dan mudah dipelihara, serta mempermudah pembuatan aplikasi yang lebih kompleks dan terstruktur dengan lebih efisien.

Dapatkan Berita dan Informasi Terbaru dengan mengikuti kami di Google News