JavaScript Academy · Pelajaran

Dasar ESM — import/export, default vs bernama

Pelajari dasar import/export ESM: pengertian modul, ekspor bernama vs default, impor ruang nama, dan perbandingan singkat dengan CommonJS

Pelajaran 1 dari 38 langkah

Dasar ESM — import/export, default vs bernama adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 3 pelajaran total.

Apa itu modul?

Tujuan: Baca sintaks modul dengan percaya diri.

  • Pengertian modul
  • Ekspor bernama vs bawaan
  • import * sebagai ruang nama
  • Perbandingan singkat dengan CJS
Dasar ESM — import/export, default vs bernama — ilustrasi 1

Modul = berkas + lingkup lokal

Sebuah modul adalah berkas. Variabelnya bersifat lokal kecuali Anda mengekspornya.

// A module is just a file with its own scope
// Here we simulate "module scope" by keeping variables local.
(function () {
  const secret = 42;                          // local to this file/scope
  function reveal() { return "value:" + secret; }
  console.log("module-like scope:", typeof secret === "number", reveal());
})();
Dasar ESM — import/export, default vs bernama — ilustrasi 2

Ekspor bernama — gagasan

Ekspor bernama menggunakan kurung kurawal saat diimpor: import { name }. Anda dapat mengekspor beberapa item dari satu berkas.

// Named exports: you export multiple items by name
const exampleNamedExport = [
  "export const PI = 3.14;",
  "export function sum(a, b) { return a + b; }",
  "import { PI, sum } from \\"./math.js\\";"
];

console.log("named export example:");
for (const line of exampleNamedExport) console.log(line);

// Tiny emulation: pretend we imported two named symbols
const PI = 3.14;
function sum(a, b) { return a + b; }
console.log("emulated use:", PI, sum(2, 3));
Dasar ESM — import/export, default vs bernama — ilustrasi 3

Ekspor bawaan — gagasan

Ekspor bawaan diimpor tanpa kurung kurawal: import name from "path".

// Default export: each module can have at most one default
const exampleDefault = [
  "export default function greet(name) { return \\"Hi \\" + name; }",
  "import greet from \\"./greet.js\\"; // no braces"
];

console.log("default export example:");
for (const line of exampleDefault) console.log(line);

// Emulation of default import usage
function greet(name) { return "Hi " + name; }
console.log("emulated default:", greet("Ayla"));
Dasar ESM — import/export, default vs bernama — ilustrasi 4

Impor ruang nama

import * as ns mengumpulkan ekspor bernama ke dalam satu objek (misalnya, math.sum).

// Namespace import collects all named exports under one object
const exampleNamespace = [
  "import * as math from \\"./math.js\\";",
  "console.log(math.PI, math.sum(1, 2));"
];

console.log("namespace import example:");
for (const line of exampleNamespace) console.log(line);

// Emulate a namespace object
const math = { PI: 3.14, sum: function (a, b) { return a + b; } };
console.log("namespace use:", math.PI, math.sum(4, 5));
Dasar ESM — import/export, default vs bernama — ilustrasi 5

Perbandingan CJS dan catatan resolusi

CJS vs ESM (sekilas):

  • ESM: sintaks import/export (statis). Contoh: import { x } from "./m.js".
  • CJS: require/module.exports (dinamis). Contoh: const x = require("./m.js").
  • Dalam ESM, gunakan ekstensi berkas secara eksplisit di peramban dan banyak konfigurasi Node (misalnya, ./file.js).
Dasar ESM — import/export, default vs bernama — ilustrasi 6

Kuis impor bernama vs bawaan

Pemeriksaan singkat: Sintaks impor bernama.

Dasar ESM — import/export, default vs bernama — ilustrasi 7

Ringkasan

Ringkasan: Modul adalah berkas. Gunakan ekspor bernama dengan kurung kurawal, satu ekspor bawaan tanpa kurung kurawal, dan import * untuk ruang nama. CJS menggunakan require, sedangkan ESM menggunakan import.

Dasar ESM — import/export, default vs bernama — ilustrasi 8
Gratis untuk memulai

Belajar JavaScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus
59
Pelajaran
200

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Dasar ESM — import/export, default vs bernama” gratis?

Ya — teks lengkap “Dasar ESM — import/export, default vs bernama” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Dasar ESM — import/export, default vs bernama”?

Pelajari dasar import/export ESM: pengertian modul, ekspor bernama vs default, impor ruang nama, dan perbandingan singkat dengan CommonJS Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 3.

Berapa lama pelajaran “Dasar ESM — import/export, default vs bernama” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Dasar ESM — import/export, default vs bernama
  2. Dasar CommonJS — require/module.exports dan exports
  3. Resolusi Modul di Node dan Bundler Peramban
← Kembali ke JavaScript Academy