Panduan ES Modules JavaScript: Sintaks, Impor, dan Ekspor

Definisi dan Fungsi ES Modules

ES Modules (ESM) adalah standar resmi JavaScript untuk mengelola dependensi kode dalam aplikasi. Berbeda dengan sistem modul lama seperti CommonJS (CJS) yang menggunakan require(), ESM menggunakan sintaks import dan export yang bersifat statis, memungkinkan optimasi performa seperti tree-shaking oleh bundler.

Sintaks Dasar

Untuk menggunakan ESM, Anda harus memastikan file memiliki ekstensi .mjs atau mengatur "type": "module" di dalam package.json untuk proyek Node.js.

Export (Mengekspor Kode)

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

export default function multiply(a, b) {
  return a * b;
}

Import (Mengimpor Kode)

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

console.log(add(5, 3)); // 8
console.log(multiply(5, 3)); // 15

Perbandingan: ESM vs CommonJS

Implementasi di Browser

Untuk menggunakan ESM langsung di browser tanpa bundler, Anda wajib menambahkan atribut type="module" pada tag script:

<script type="module" src="main.js"></script>

Browser akan memperlakukan script tersebut sebagai modul, yang berarti variabel di dalamnya tidak akan mencemari global scope dan secara otomatis berjalan dalam strict mode.

Tips Troubleshooting

• Error 'Cannot use import statement outside a module': Pastikan package.json memiliki "type": "module" atau gunakan ekstensi .mjs.
• CORS Policy: Saat memuat modul dari file lokal di browser, Anda harus menjalankan server lokal (seperti Live Server di VS Code) karena ESM memblokir akses file protokol file://.
• Ekstensi File: Selalu sertakan ekstensi file (misal: ./utils.js) saat melakukan import di lingkungan browser atau Node.js modern.