De basis van ESM — import/export, default versus named
Leer de basis van ESM-import/export: wat een module is, named versus default exports, namespace-imports en een beknopte vergelijking met CommonJS
De basis van ESM — import/export, default versus named is een gratis JavaScript Academy-les op CoddyKit. Dit is les 1 van 3. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 3 lessen.
Wat is een module?
Doel: Modulesyntaxis met vertrouwen lezen.
- Wat een module is
- Benoemde versus standaard exports
- import * als naamruimte
- Korte vergelijking met CJS
Module = bestand + lokale scope
Een module is een bestand. De variabelen ervan zijn lokaal, tenzij je ze exporteert.
// 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());
})();
Benoemde exports — idee
Bij benoemde exports gebruik je accolades bij het importeren: import { name }. Je kunt meerdere items uit één bestand exporteren.
// 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));
Standaardexport — idee
Een standaardexport importeer je zonder accolades: 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"));
Import als naamruimte
import * as ns verzamelt benoemde exports in één object (bijv. 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));
Vergelijking van CJS en ESM en opmerkingen over resolutie
CJS versus ESM (in het kort):
- ESM: syntaxis voor import/export (statisch). Voorbeeld: import { x } from "./m.js".
- CJS: require/module.exports (dynamisch). Voorbeeld: const x = require("./m.js").
- Gebruik in ESM expliciete bestandsextensies in de browser en in veel Node-configuraties (bijv. ./file.js).
Quiz over benoemde en standaardimports
Snelle controle: Syntaxis voor benoemde imports.
Samenvatting
Samenvatting: Een module is een bestand. Gebruik benoemde exports met accolades, één standaardexport zonder accolades en import * voor een naamruimte. CJS gebruikt require, ESM gebruikt import.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 59
- Lessen
- 200
Veelgestelde vragen
Is de les “De basis van ESM — import/export, default versus named” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “De basis van ESM — import/export, default versus named”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 3 lessen.
Wat leer ik in “De basis van ESM — import/export, default versus named”?
Leer de basis van ESM-import/export: wat een module is, named versus default exports, namespace-imports en een beknopte vergelijking met CommonJS Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met JavaScript Academy te beginnen?
Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 3.
Hoe lang duurt de les “De basis van ESM — import/export, default versus named”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?
Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- De basis van ESM — import/export, default versus named
- De basis van CommonJS — require/module.exports en exports
- Module-resolutie in Node en browserbundelaars