Modules

Wat zijn modules?

Met modules verdeel je JavaScript-code over meerdere bestanden. Elk bestand is een module die bepaalde functies, variabelen of classes exporteert. Andere bestanden kunnen die importeren.

Zonder modules

<!-- Alle code in één groot bestand -->
<script src="alles.js"></script>

Met modules

<!-- Code verdeeld over logische bestanden -->
<script type="module" src="app.js"></script>

// app.js importeert wat het nodig heeft
import { berekenBtw } from './utils.js';
import { toonGebruiker } from './ui.js';

export

Met export maak je code beschikbaar voor andere bestanden.

// utils.js

export function berekenBtw(prijs) {
  return prijs * 1.21;
}

export function afronden(getal, decimalen = 2) {
  return Number(getal.toFixed(decimalen));
}

export const BTW_PERCENTAGE = 0.21;

Export onderaan het bestand

// utils.js — alternatief: exporteer alles onderaan
function berekenBtw(prijs) {
  return prijs * 1.21;
}

function afronden(getal, decimalen = 2) {
  return Number(getal.toFixed(decimalen));
}

const BTW_PERCENTAGE = 0.21;

export { berekenBtw, afronden, BTW_PERCENTAGE };

import

Met import haal je exports op uit een ander bestand.

// app.js
import { berekenBtw, afronden } from './utils.js';

const prijs = 100;
const prijsMetBtw = berekenBtw(prijs);
console.log(afronden(prijsMetBtw)); // 121

Alles importeren met *

import * as utils from './utils.js';

console.log(utils.berekenBtw(100)); // 121
console.log(utils.BTW_PERCENTAGE);  // 0.21

Default export

Een bestand kan één default export hebben. Dit is de hoofdexport van het bestand, vaak een klasse of de belangrijkste functie.

// gebruiker.js
export default function maakGebruiker(naam, email) {
  return {
    naam,
    email,
    aangemeldOp: new Date()
  };
}

// app.js — importeer default export (geen accolades)
import maakGebruiker from './gebruiker.js';

const gebruiker = maakGebruiker('Jan', 'jan@email.com');
console.log(gebruiker.naam); // "Jan"

import createUser from './gebruiker.js'; // andere naam, werkt ook

Default + named exports combineren

// api.js
export default async function fetchData(url) {
  const response = await fetch(url);
  return response.json();
}

export const BASE_URL = 'https://api.example.com';
export function buildUrl(endpoint) {
  return `${BASE_URL}/${endpoint}`;
}

// app.js
import fetchData, { BASE_URL, buildUrl } from './api.js';

const url = buildUrl('gebruikers');
const data = await fetchData(url);

Named vs default exports

Alias met as

Met as geef je een import of export een andere naam.

Import alias

import { berekenBtw as calculateTax } from './utils.js';

console.log(calculateTax(100)); // 121

Naamconflicten oplossen

import { formatDatum as formatNl } from './nl-utils.js';
import { formatDatum as formatEn } from './en-utils.js';

console.log(formatNl(new Date())); // "24-3-2026"
console.log(formatEn(new Date())); // "3/24/2026"

Modules in HTML

Om modules te gebruiken in de browser voeg je type="module" toe aan je script-tag.

<!-- Zonder type="module" werkt import/export niet -->
<script src="app.js"></script>

<!-- Met type="module" -->
<script type="module" src="app.js"></script>

Praktische bestandsstructuur

Een veelgebruikte indeling voor een kleine JavaScript-app:

project/
├── index.html
├── js/
│   ├── app.js          // hoofdbestand, importeert alles
│   ├── api.js          // fetch-functies
│   ├── ui.js           // DOM-manipulatie functies
│   └── utils.js        // hulpfuncties (berekeningen, formattering)

Voorbeeld — utils.js

// js/utils.js
export function formateerPrijs(prijs) {
  return `€${prijs.toFixed(2)}`;
}

export function datumNaarString(datum) {
  return datum.toLocaleDateString('nl-NL');
}

export const MAX_ITEMS = 100;

Voorbeeld — ui.js

// js/ui.js
export function toonFoutmelding(tekst) {
  const el = document.querySelector('#fout');
  el.textContent = tekst;
  el.style.display = 'block';
}

export function verbergFoutmelding() {
  document.querySelector('#fout').style.display = 'none';
}

export function toonLaadSpinner() {
  document.querySelector('#spinner').style.display = 'block';
}

export function verbergLaadSpinner() {
  document.querySelector('#spinner').style.display = 'none';
}

Voorbeeld — app.js

// js/app.js
import { formateerPrijs } from './utils.js';
import { toonFoutmelding, toonLaadSpinner, verbergLaadSpinner } from './ui.js';

async function laadProducten() {
  toonLaadSpinner();

  try {
    const response = await fetch('./data/producten.json');
    const producten = await response.json();

    const html = producten
      .map(p => `
${p.naam} — ${formateerPrijs(p.prijs)}
`)
      .join('');

    document.querySelector('#producten').innerHTML = html;
  } catch (error) {
    toonFoutmelding('Producten konden niet worden geladen');
  } finally {
    verbergLaadSpinner();
  }
}

laadProducten();

Samenvatting