Deze vertaling is niet volledig. Help dit artikel te vertalen vanuit het Engels.

Het export statement wordt gebruikt bij het maken van JavaScript modules om functies, objecten of primitieve waarden te exporteren van de module zodat deze gebruikt kunnen worden door andere programmas met de import statement.

Deze functie is momenteel enkel geïmplementeerd in Safari en Chrome. Het is ook geïmplementeerd in vele 'transpilers' zoals de Traceur Compiler, Babel of Rollup.

Syntax

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var, function
export let name1 = …, name2 = …, …, nameN; // also var, const

export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
nameN
Identificator die geëxporteerd moet worden (zodat het geïmporteerd kan worden via import in een ander script).

Beschrijving

Er zijn 2 verschillende types van export. Elk type komt overeen met een van de bovenstaande syntaxen.

  • Genoemde exports (named exports):
    // exporteert een eerder gedeclareerde functie
    export { myFunction }; 
    
    // exporteert een constante
    export const foo = Math.sqrt(2);
  • Standaard exports (default exports) (function):
    export default function() {} 
  • Standaard exports (default exports) (class):
    export default class {} 

Genoemde exports zijn handig om verschillende waardes te exporteren. Tijdens de import is het verplicht om dezelfde naam als het overeenkomende object te gebruiken.

Maar een standaard export kan geïmporteerd worden met enige andere naam, bijvoorbeeld:

export default k = 12; // in bestand test.js

import m from './test' // let op dat we de vrijheid hebben om import m te gebruiken in plaats van import k, omdat k een default export is.

console.log(m);        // Zal '12' in de console laten zien

Er kan slechts 1 standaard export zijn.

De volgende syntax exporteert geen standaard export van de geïmporteerde module:

export * from …;

Als de standaard export nodig is, gebruik de volgende syntax:

import mod from "mod";
export default mod;

Voorbeelden

Genoemde (named) exports gebruiken

In de module zouden we de volgende code kunnen gebruiken:

// module "my-module.js"
function cube(x) {
  return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube, foo };

Op deze manier zouden we in een ander script deze code kunnen hebben:

import { cube, foo } from 'my-module';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

De standaard (default) export gebruiken

Als we een enkele waarde willen exporteren of willen terugvallen op een waarde voor onze module zouden we een standaard (default) export kunnen gebruiken:

// module "my-module.js"
export default function cube(x) {
  return x * x * x;
}

Op die manier zal het vanzelfsprekend zijn om in een ander script de standaard (default) export te importeren:

import cube from 'my-module';
console.log(cube(3)); // 27

Merk op dat het niet mogelijk is om var, let of const te gebruiken met export default.

Specificaties

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Exports' in that specification.
Standard Initiële definitie.
ECMAScript Latest Draft (ECMA-262)
The definition of 'Exports' in that specification.
Living Standard  

Browser compatibiliteit

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support61151542 No4710.1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic support No61 Yes542 No4710.1

1. From version 15: this feature is behind the Experimental JavaScript Features preference.

2. From version 54: this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.

Bekijk ook

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: artusvranken
 Laatst bijgewerkt door: artusvranken,