Module adalah satu file JavaScript yang membagikan sebagian isinya ke file lain. File pemilik fungsi menandainya dengan export, dan file yang butuh mengambilnya dengan import. Jadi kode besar bisa dipecah jadi file-file kecil yang masing-masing fokus ke satu hal.
🧪 Tebakan cepat:
import add from './math.js', tanpa kurung kurawal, mengambil fungsi bernamaaddatau sesuatu yang lain? Tebak dulu, jawabannya ada di bagian "Export default: satu nilai utama".
Bagikan dengan export, ambil dengan import
// math.js
export const PI = 3.14
export function add(a, b) {
return a + b
}
// app.js
import { add } from './math.js'
console.log(add(2, 3)) // 5
exportdi depanconstataufunctionmembagikan nilai itu ke file lain. Ini disebut named export (export bernama): tiap nilai dibagikan dengan namanya sendiri, dan satu file boleh punya banyak.import { add } from './math.js'mengambiladddarimath.js. Nama di dalam kurung kurawal harus persis sama dengan yang di-export.{ ad }atau{ Add }bikin error sebelum kode apa pun jalan.'./math.js'adalah alamat file-nya../artinya "di folder yang sama".- Yang gak di-export tetap milik file itu sendiri. File lain gak bisa memakainya.
Butuh lebih dari satu? Pisahkan dengan koma: import { add, PI } from './math.js'.
Export default: satu nilai utama
// math.js
export default function multiply(a, b) {
return a * b
}
// app.js
import kali from './math.js'
console.log(kali(2, 3)) // 6
export defaultmenandai satu nilai utama file itu. Satu file cuma boleh punya satu default.- Import default ditulis tanpa kurung kurawal, dan namanya bebas:
kalidiapp.jstetap mengambilmultiply.
Jawaban tebakan: import add from './math.js' mengambil export default, apa pun nama aslinya, bukan export bernama add. Kalau math.js cuma punya named export, import itu error, dan perbaikannya kurung kurawal: import { add } from './math.js'.
Ringkasnya: named export diimpor pakai { } dengan nama yang persis sama, default export diimpor tanpa { } dengan nama bebas.
Module di browser dan di latihan
<script type="module" src="app.js"></script>
import dan export cuma jalan di file yang dimuat sebagai module, yaitu lewat type="module". Editor latihan memperlakukan kodemu sebagai satu module: export jalan, dan pengecekannya membaca apa yang kamu export, sama seperti file lain yang meng-import-nya. Yang gak bisa cuma import dari file lain, karena latihannya cuma punya satu file: import { add } from './math.js' dijawab Cannot find module './math.js'.
⚠️ Jebakan yang sering ketemu
- Lupa
./atau.js.import { add } from 'math'gak ketemu di browser. Tulis alamat lengkapnya:'./math.js'. - Mengira variabel bisa dipakai di file lain. Variabel di satu module gak kelihatan di module lain, kecuali di-export lalu di-import.
- Membuka file HTML langsung dari komputer. Module gak jalan lewat alamat
file://. Buka lewat server lokal, misalnya ekstensi Live Server.
TL;DR: export membagikan nilai dari sebuah file, import mengambilnya di file lain. Named export (export function add) bisa banyak per file dan diimpor pakai kurung kurawal dengan nama persis: import { add } from './math.js'. Export default (export default ...) cuma satu per file dan diimpor tanpa kurung kurawal dengan nama bebas. Di browser, module dimuat lewat <script type="module">.
