Belajar JavaScript - Modul ES dan Penggunaan import/export

#Pendahuluan

Bayangkan menulis seluruh aplikasi dalam satu file berisi ribuan baris. Tidak lama kemudian kalian tidak tahu fungsi mana dipanggil dari mana, dan mengubah satu bagian berisiko merusak bagian lain. Modul adalah solusinya: memecah kode menjadi file-file kecil yang masing-masing bertanggung jawab atas satu bagian, lalu saling berbagi kode lewat import dan export.

Episode 10 membahas modul ES — sistem modul resmi JavaScript sejak ES6. Kalian akan belajar named export dan default export, berbagai bentuk perintah import, serta cara menjalankan modul dengan benar di Node.js. Modul juga menyiapkan kalian untuk episode 20 dan 21 tentang tooling dan bundler.

Satu konsep yang membuat semuanya masuk akal: export menentukan apa yang keluar dari sebuah file, dan import menentukan apa yang masuk ke file lain.

#Mengapa Modul Diperlukan

#Masalah Kode dalam Satu File

Tanpa modul, semua kode berbagi satu namespace global. Risikonya nyata: dua file bisa secara tidak sengaja mendefinisikan fungsi dengan nama yang sama, dan yang terakhir ditulis menimpa yang pertama. Kesalahan semacam ini sangat sulit dilacak karena tidak ada error yang muncul.

Modul menyelesaikan ini dengan dua mekanisme:

• Scope terisolasi: setiap file punya scope sendiri; variabel di dalamnya tidak terlihat dari luar kecuali di-export.
• Dependensi eksplisit: file hanya mendapat apa yang di-import, sehingga alur kode terlihat jelas.

Hasilnya, kode lebih mudah dicari, diuji, dan dipakai ulang. Satu modul yang fokus jauh lebih mudah dibaca daripada satu file yang mencoba melakukan segalanya.

#Named Export dan Import

#Mengekspor Beberapa Nilai

Named export mengekspor banyak nilai dari satu file dengan nama yang jelas. Setiap nilai ditandai kata kunci export:

matematika.js - named export

export const PI = 3.14159;
 
export function lingkaran(jariJari) {
  return 2 * PI * jariJari;
}
 
export function luasLingkaran(jariJari) {
  return PI * jariJari * jariJari;
}

File matematika.js di atas mengekspor konstanta PI dan dua fungsi. export const PI = 3.14159 membuat nilai tersedia bagi file lain. Dengan named export, nama di file tujuan harus sama persis dengan nama di file sumber.

#Mengimpor Named Export

Untuk memakai nilai yang diekspor, gunakan import dengan kurung kurawal:

main.js - import named export

import { PI, luasLingkaran } from "./matematika.js";
 
console.log(PI);
console.log(luasLingkaran(7));

import { PI, luasLingkaran } from "./matematika.js" mengambil hanya nilai yang dibutuhkan. Perhatikan path diawali ./ dan diakhiri .js — aturan ini wajib di Node.js. Keuntungan named export: IDE bisa menemukan semua pengguna sebuah fungsi, dan hanya kode yang di-import yang dimuat.

#Alias pada Import

Jika nama di file tujuan bentrok, gunakan alias dengan kata kunci as:

Import dengan alias

import { luasLingkaran as hitungLuas } from "./matematika.js";
 
console.log(hitungLuas(7));

import { luasLingkaran as hitungLuas } memberi nama lokal baru tanpa mengubah nama asli di file sumber. Alias juga dipakai untuk mengganti nama agar lebih deskriptif di konteks file tujuan.

#Default Export dan Import

#Satu Ekspor Utama per Modul

Default export digunakan untuk satu nilai utama per file. Nilai default tidak harus punya nama di file sumber:

sapa.js - default export

export default function sapa(nama) {
  return `Halo, ${nama}!`;
}

export default function sapa(nama) mengekspor fungsi ini sebagai nilai default modul. Sebuah modul hanya boleh punya satu default export. Pola ini cocok ketika sebuah file mewakili satu komponen atau satu fungsi utama.

#Mengimpor Default Export

Import default tidak memakai kurung kurawal, dan nama lokalnya bebas — tidak harus mengikuti nama asli:

main.js - import default

import sapaDariFile from "./sapa.js";
 
console.log(sapaDariFile("Arman"));

import sapaDariFile from "./sapa.js" memberi nama lokal yang bisa apa saja. Aturan praktis: kurung kurawal untuk named export, tanpa kurung kurawal untuk default export. Kombinasi keduanya juga bisa dalam satu perintah import.

#Menjalankan Modul ES di Node.js

#Menandai Project sebagai Modul

Node.js butuh tahu apakah file memakai modul ES atau CommonJS. Cara paling sederhana: tambahkan "type": "module" ke package.json:

{
  "name": "belajar-modul",
  "type": "module",
  "main": "main.js"
}

Dengan "type": "module", Node memperlakukan semua file .js sebagai modul ES. Tanpa ini, Node menganggap file sebagai CommonJS dan import akan error dengan SyntaxError: Cannot use import statement outside a module.

#Menjalankan Modul

Setelah package.json diatur, jalankan file utama seperti biasa:

node main.js

node main.js mengeksekusi main.js yang mengimport dari matematika.js dan sapa.js. Node menangani resolusi modul secara otomatis, termasuk import bersarang: jika main.js mengimport matematika.js, dan matematika.js mengimport modul lain, semuanya ikut dimuat.

#Ekspor dari Beberapa File

Kalian juga bisa menggabungkan export lewat satu file barrel untuk menyederhanakan import di banyak tempat:

indeks.js - re-export

export { lingkaran, luasLingkaran, PI } from "./matematika.js";
export { default as sapa } from "./sapa.js";

export { lingkaran } from "./matematika.js" meneruskan export file lain tanpa mendefinisikan ulang. File lain cukup mengimport dari satu tempat: import { sapa, luasLingkaran } from "./indeks.js".

#Penutup

Episode 10 membuat kalian mampu memecah kode menjadi modul: named export untuk banyak nilai, default export untuk satu nilai utama, berbagai bentuk import, serta menjalankan modul ES di Node.js dengan "type": "module". Kalian juga belajar pola barrel untuk menggabungkan export.

Inti yang harus dibawa pulang:

• Modul mengisolasi scope dan membuat dependensi eksplisit.
• Named export memakai kurung kurawal saat import dan namanya harus sama.
• Default export tanpa kurung kurawal dan bebas diberi nama lokal.
• Satu modul hanya boleh punya satu default export.
• Tambahkan "type": "module" agar Node memproses modul ES.
• Path modul lokal wajib diawali ./ dan diakhiri .js.

Di episode 11 selanjutnya kita akan membahas destructuring dan assignment terstruktur — mengekstrak nilai dari array dan objek langsung ke variabel dengan satu pernyataan rapi. Ini fitur yang membuat kode kalian jauh lebih ringkas dan dibaca dengan jelas.