Modul JavaScript: Blok-Blok Pembangunan Web Modern

Hai sana, para ahli JavaScript masa depan! Hari ini, kita akan menyelam ke dunia yang menarik dari modul JavaScript. Sebagai guru komputer tetangga yang ramah, saya sangat gembira untuk mengorbit Anda dalam perjalanan ini. Jadi, pegang keyboard Anda (tongkat sihir), dan mari kita buat some magic module!

Apa Itu Modul?

Imaginasi Anda membangun istana Lego yang besar. Daripada mencoba untuk membangunnya semua sekaligus, tidakkah lebih mudah untuk membuat pieces kecil dan dapat dikelola kemudian menyatunya? Itu tepatnya apa yang dilakukan modul dalam JavaScript!

Modul adalah piece kode yang mandiri yang melakukan fungsi tertentu. Itu seperti mini-program dalam program utama Anda. Modul membantu kita mengatur kode, membuatnya lebih mudah dipelihara, dan memungkinkan kita untuk mengulangi fungsionalitas di bagian yang berbeda dari aplikasi kita.

Mari kita mulai dengan contoh sederhana:

// mathModule.js
export function add(a, b) {
return a + b;
}

export function subtract(a, b) {
return a - b;
}

Dalam contoh ini, kita membuat modul yang disebut mathModule.js. Itu mengandung dua fungsi: add dan subtract. Kata kunci export membuat fungsi ini tersedia untuk digunakan di bagian lain program kita.

Sekarang, mari kita lihat bagaimana kita bisa menggunakan modul ini:

// main.js
import { add, subtract } from './mathModule.js';

console.log(add(5, 3));      // Output: 8
console.log(subtract(10, 4)); // Output: 6

Di sini, kita mengimpor fungsi add dan subtract dari file mathModule.js kita. Kita kemudian bisa menggunakan fungsi ini seperti jika mereka didefinisikan dalam file main.js.

Ekspor Banyak Objek dari Satu Modul

Sekarang kita sudah menguasai dasarnya, mari kita lihat bagaimana kita bisa mengekspor banyak objek dari satu modul. Itu seperti memasukkan banyak alat dalam kotak alat JavaScript Anda!

// toolbox.js
export const hammer = {
use: () => console.log("Bang! Bang!"),
weight: 2
};

export function screwdriver() {
console.log("Twist! Twist!");
}

export class Saw {
cut() {
console.log("Zzzz! Zzzz!");
}
}

Dalam modul toolbox.js ini, kita mengekspor objek (hammer), fungsi (screwdriver), dan kelas (Saw). Mari kita gunakan mereka:

// workshop.js
import { hammer, screwdriver, Saw } from './toolbox.js';

hammer.use();  // Output: Bang! Bang!
console.log(hammer.weight);  // Output: 2

screwdriver();  // Output: Twist! Twist!

const mySaw = new Saw();
mySaw.cut();  // Output: Zzzz! Zzzz!

Lihat bagaimana kita bisa mengimpor dan menggunakan jenis ekspor yang berbeda? Itu seperti memiliki adapter universal untuk semua alat JavaScript Anda!

Ekspor Standar

kadang-kadang, Anda mungkin memiliki modul yang utamanya melakukan satu hal. Dalam kasus seperti itu, Anda bisa menggunakan ekspor standar. Itu seperti memiliki pemain bintang di tim JavaScript Anda!

// superHero.js
export default class SuperHero {
constructor(name) {
this.name = name;
}

fly() {
console.log(`${this.name} is flying!`);
}
}

export function sidekick() {
console.log("I'm here to help!");
}

Dalam modul ini, kita memiliki ekspor standar (kelas SuperHero) dan ekspor dinamai (sidekick fungsi). Mari kita gunakan mereka:

// comicBook.js
import Hero, { sidekick } from './superHero.js';

const batman = new Hero("Batman");
batman.fly();  // Output: Batman is flying!

sidekick();  // Output: I'm here to help!

Perhatikan bagaimana kita mengimpor ekspor standar (Hero) tanpa kurung kurawal? Itu adalah penghargaan khusus ekspor standar!

Ganti Nama Impor dan Ekspor

kadang-kadang, Anda mungkin ingin menggunakan nama yang berbeda untuk fungsi atau variabel yang diimpor. JavaScript menawarkan fitur penggantian nama. Itu seperti memberi nama panggilan untuk alat yang diimpor Anda!

// colors.js
export const red = "#FF0000";
export const blue = "#0000FF";
export const green = "#00FF00";

Sekarang, mari kita mengimpor dan mengganti nama:

// palette.js
import { red as crimson, blue as navy, green } from './colors.js';

console.log(crimson);  // Output: #FF0000
console.log(navy);     // Output: #0000FF
console.log(green);    // Output: #00FF00

Anda juga bisa mengganti nama saat mengekspor:

// shapes.js
const circle = (radius) => Math.PI * radius * radius;
const square = (side) => side * side;

export { circle as round, square };

Dan mengimpor seperti ini:

// geometry.js
import { round, square } from './shapes.js';

console.log(round(5));   // Output: 78.53981633974483
console.log(square(4));  // Output: 16

Tabel Metode

Berikut adalah tabel praktis yang menggabungkan metode yang kita pelajari:

Metode	Deskripsi	Contoh
export	Membuat fungsi, objek, atau nilai tersedia untuk digunakan di modul lain	export function add(a, b) { return a + b; }
import	Memungkinkan Anda untuk menggunakan fungsi, objek, atau nilai dari modul lain	import { add } from './mathModule.js';
export default	Mengekspor nilai tunggal sebagai ekspor utama modul	export default class SuperHero { ... }
import as	Mengganti nama nilai yang diimpor	import { red as crimson } from './colors.js';
export as	Mengganti nama nilai yang diekspor	export { circle as round };

Dan itu adalah, teman-teman! Anda telah meningkatkan keterampilan JavaScript Anda dengan modul. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba konsep ini. Sebelum Anda tahu, Anda akan membangun aplikasi JavaScript modular seperti seorang ahli!

Happy coding, dan may the modules be with you! ??‍??‍?

Credits: Image by storyset