Menggunakan export dan import dalam JavaScript: Biar Kode Kamu Ga Saling Serobot!

 

Kamu tahu nggak sih, di dunia nyata ada sistem di mana orang bisa kirim barang dari satu tempat ke tempat lain, misalnya via paket atau pengiriman online? Nah, di dunia JavaScript juga ada sistem pengiriman, tapi bukan barang—ini tentang export dan import!

Bayangin aja, kamu punya beberapa barang keren di satu gudang (file), dan kamu pengen kirim barang itu ke temen kamu yang lagi butuh (file lain). Gimana caranya? Dengan export! Dan temen kamu bisa ngambil barang itu pake import. Jadi, nggak ada lagi tuh file yang ngambil barang dari sembarang tempat tanpa izin, semuanya rapi dan terorganisir!

1. Apa Itu export?

Kalau export di dunia nyata itu kayak kamu ngirim barang ke toko lain, di JavaScript, export itu adalah cara kita mengirim fungsi, variabel, atau objek dari satu file ke file lain. Tanpa export, kode yang kamu tulis di satu file cuma bisa diakses di file itu aja—gak bisa dibagi ke file lain. Kalau mau barangnya bisa sampai ke tujuan, ya harus di-“export” dulu!

Contoh export: Misalnya, kamu punya file yang ngurusin perhitungan pajak, dan kamu pengen berbagi fungsi hitung pajak ke file lain.

File: hitungPajak.js

// Fungsi untuk menghitung pajak
export function hitungPajak(harga) {
  return harga * 0.1;
}

// Atau bisa juga pakai export default (biar lebih simpel)
export default function hitungDiskon(harga) {
  return harga * 0.05;
}

Di sini, kita export dua fungsi: satu untuk menghitung pajak, satu lagi untuk menghitung diskon. Fungsi yang kita export itu bisa diambil oleh file lain yang butuh!

2. Apa Itu import?

Nah, setelah kamu export sesuatu, pasti ada yang butuh barang itu kan? Itu dia tugas import! import adalah cara kita mengambil fungsi, objek, atau variabel yang sudah di-export dari file lain. Jadi, kalau kamu butuh sesuatu yang udah di-export, tinggal import aja, dan barangnya bakal langsung datang! 🎁

Contoh import: Sekarang kita coba ambil fungsi yang sudah di-export dari file hitungPajak.js di file lain.

File: app.js

// Import fungsi dari hitungPajak.js
import { hitungPajak } from './hitungPajak.js';
import hitungDiskon from './hitungPajak.js'; // Kalau pakai default export, cukup nama fungsi aja

let harga = 1000;
let pajak = hitungPajak(harga);
let diskon = hitungDiskon(harga);

console.log(`Pajak: ${pajak}`);
console.log(`Diskon: ${diskon}`);

Penjelasan: Di sini, kita import dua fungsi yang sudah di-export di hitungPajak.js. Kalau kamu export pakai nama, seperti hitungPajak, kamu harus import dengan nama yang sama di file lain. Kalau pakai export default, kamu bebas pilih nama yang mau dipakai di file yang import.

3. Kenapa Harus export dan import?

Sebelum ada export dan import, JavaScript kayak file yang disatuin dalam satu kotak besar yang penuh sesak. Jadi, setiap kali ada file yang butuh sesuatu, mereka harus berantem dulu buat ambil barang. Nggak lucu kan? 😅

Dengan export dan import, kode kamu jadi lebih modular, rapi, dan bisa dibagi antar file dengan gampang. Kamu jadi bisa:

• Membagi kode menjadi modul-modul kecil: Setiap file jadi bisa fokus hanya pada tugas tertentu.
• Menghindari konflik: Nggak ada lagi ngambil barang tanpa izin—semuanya jelas dan teratur!
• Meningkatkan pemeliharaan kode: Kalau ada yang salah di suatu file, tinggal perbaiki file itu tanpa harus ganggu file lain.

4. export Default vs Named Export: Mana yang Lebih Keren?

export itu ada dua jenis: named export dan export default. Keduanya keren, tapi cara pakainya beda.

• Named export: Kamu bisa export banyak barang, dan setiap barang punya nama yang jelas. Kamu harus ngambil barang itu dengan nama yang sama.
• export default: Kamu cuma bisa export satu barang sebagai default, dan kamu bebas kasih nama apa aja pas import.

Contoh Named Export:

// export banyak barang dengan nama yang jelas
export function hitungPajak() { ... }
export function hitungDiskon() { ... }

Contoh Default Export:

// export cuma satu barang, bisa dipakai nama apa aja
export default function hitungDiskon() { ... }

5. Kesimpulan: export dan import Itu Kayak Teman yang Saling Bantu!

Dengan export dan import, kode kamu jadi lebih mudah dibagi, lebih rapi, dan lebih gampang dikelola. Keduanya adalah teman baik yang saling bantu—export yang ngirim barang (fungsi, variabel, objek), dan import yang terima kiriman dan pakai barang itu di file lain.

Jadi, mulai sekarang, jangan biarkan kode kamu berantakan. Pecah jadi modul-modul kecil yang bisa export dan import sesuka hati, dan lihat proyek kamu jadi lebih terorganisir seperti gudang yang rapi!

 

 

JavaScript

Pelajari JavaScript untuk interaktivitas website.