Modules in JavaScript
Open de inspector om de output van JavaScript te zien

Modules zijn een manier om JavaScript-code te organiseren in aparte bestanden. Dit maakt het mogelijk om code herbruikbaar te maken en het beheer van grote projecten te vereenvoudigen.

De juiste script tag

Om modules te gebruiken, moeten we de script tag in onze HTML aanpassen. In plaats van een gewone script tag, gebruiken we een script tag met het type "module". Dit geeft aan dat het JavaScript-bestand een module is en dat we gebruik kunnen maken van import en export statements.

Hier is een voorbeeld van hoe we een module kunnen importeren in onze HTML:

In dit voorbeeld importeren we een JavaScript-bestand genaamd "modules

Andere JS files gebruiken in modules.js

Om andere JavaScript-bestanden te gebruiken in je module, kun je de `import` statement gebruiken. Hier is een voorbeeld:

// modules.js

import { add } from './math.js';
import { add as sum } from './math.js'; // Importeren met een alias
import { createPerson } from './newperson.js';

const result = add(5, 3);
console.log(`The result of adding 5 and 3 is: ${result}`);

const result2 = sum(10, 7);
console.log(`The result of summing 10 and 7 is: ${result2}`);

const person = createPerson("Alice", 30);
console.log(person);
            

Exporteren van functies en variabelen

In een module kun je functies, variabelen, klassen, etc. exporteren zodat ze beschikbaar zijn voor andere modules. Er zijn twee manieren om iets te exporteren: named exports en default exports.

Hier is een voorbeeld van named exports:

// math.js

export function add(a, b) {
   return a + b;
}