Modul JavaScript: Blok-Blok Pembangunan Web Modern

Halo teman-teman, para ahli JavaScript masa depan! Hari ini, kita akan mandar ke dunia yang menarik dari modul JavaScript. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk membimbing Anda dalam perjalanan ini. Jadi, ambil keyboard Anda (tongkat sihir virtual), dan mari kita kerjakan sedikit sihir modul!

Apa Itu Modul?

Bayangkan Anda sedang membangun istana Lego yang besar. Daripada mencoba membangunnya semua sekaligus, tidakkah lebih mudah untuk membuat pieces kecil dan dapat dikelola, lalu menggabungkannya? Itu tepat apa yang dilakukan modul dalam JavaScript!

Modul adalah sebuah bagian kode yang mandiri yang melakukan fungsi tertentu. Itu seperti program mini dalam program utama Anda. Modul membantu kita mengatur kode, membuatnya lebih mudah dipelihara, dan memungkinkan kita untuk menggunakan kembali fungsionalitas di berbagai bagian 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 telah membuat modul 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 kemudian bisa menggunakan fungsi ini seperti jika mereka didefinisikan dalam file main.js.

Ekspor Beberapa Objek dari Satu Modul

Sekarang kita sudah memahami dasar-dasar, mari kita lihat bagaimana kita bisa ekspor beberapa objek dari satu modul. Itu seperti memasukkan banyak alat di 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 Default

kadang-kadang, Anda mungkin memiliki modul yang utamanya melakukan satu hal. Dalam kasus seperti itu, Anda bisa menggunakan ekspor default. 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 default (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 default (Hero) tanpa kurung kurawal? Itu adalah penghargaan khusus ekspor default!

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 pada alat yang diimpor Anda!

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

Sekarang, mari kita impor dan ganti 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 impor 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	Menjadikan fungsi, objek, atau nilai tersedia untuk digunakan di modul lain	export function add(a, b) { return a + b; }
import	Memungkinkan Anda menggunakan fungsi, objek, atau nilai dari modul lain	import { add } from './mathModule.js';
export default	Ekspor 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 dia, teman-teman! Anda baru saja 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