Do you like to organize your JavaScript projects in multiple and ingeniously split code files, me too! Lucky you (and me), thanks to Webpack or any tool of this kind, it's getting simpler and simpler, especially with the export / import statements. But when and how do I use them?
Support
With the ECMAScript 2015 blessing, came the
import and export statements, also known as JavaScript modules or ES modules. Very flexible and easy to use, It's sadly not yet supported on every browser (no shit Sherlock), but also not entirely on NodeJS.Node was using CommonJS for a long time, but they are working on a Modules Implementation to stay close to the browser implementation. For the moment, it's more stable and safe to use
module.exports and require() on your Node applications, but if you want to follow the progress of the Module Team, I invite you to read the very clear blog post of Dr. Axel Rauschmayer or to check the official Github repository.Basics
The most basic form is when you want to export by default a variable that you've created and use it in another file.
// ./addition.js
const addition = (a, b) => a + b;
export default addition;
// ./my-script.js
import addition from './addition.js';
addition(3, 2); // return 5You can also directly export without the need of creating a variable.
// ./addition.js
export default (a, b) => a + b;
// ./my-script.js
import addition from './addition.js';
addition(3, 2); // return 5Now, you oftently need to export and import more than one variable, for that you can do something like this :
// ./math.js
export const addition = (a, b) => a + b;
export const subtraction = (a, b) => a - b;
// ./my-script.js
import { addition, subtraction } from './math.js';
addition(3, 2); // returns 5
subtraction(3, 2); // return 1As you can see, no more default export and now, you can import whatever method you want to use elsewhere.
More advanced
You can also combine targeted variables and default export when importing.
// ./math.js
const addition = (a, b) => a + b;
export default { addition };
// ./my-script.js
import math, { addition } from './math.js';
addition(3, 2); // targeted export, returns 5
math.addition(3, 2); // default export, returns 5When names are not well suited for some cases, you can rename it during export and/or import!
// ./math.js
const addition = (a, b) => a + b;
export { addition as sum };
// ./my-script.js
import { sum as foo } from './test.js';
foo(3, 2); // return 5If there is multiple export, but you want to attach them all to a single item, you can import
*// ./math.js
export const addition = (a, b) => a + b;
export const subtraction = (a, b) => a - b;
// ./my-script.js
import * as math from './math.js';
math.addition(3, 2); // returns 5
math.subtraction(3, 2); // return 1Expert mode
When your multiple export module start to (re-)create some kind of monolithic file, it's time to use an export proxy.
// ./addition.js
export const addition = (a, b) => a + b;
// ./subtraction.js
export const subtraction = (a, b) => a - b;
// ./math.js
export { addition } from './addition.js';
export { subtraction } from './subtraction';
// ./my-script.js
import { addition, subtraction } from './math.js';
addition(3, 2); // returns 5
subtraction(3, 2); // return 1Conclusion
As you can see, it's a pretty simple topic, but very useful, especially to keep your projects organized and easy to understand. CommonJS was a good start, but import/export statements are really the apotheosis of JavaScript modules management and God, it's so pleasing to write something like
import React, { useState } from 'react'; 😍More articles
Author(s)
Making of : “La nuit des Losers”
lanuitdeslosers.ch, built fast: paper wireframes, a bold hand-drawn identity, then Claude Code to prototype and ship. A mouse-tracking hero animation, a bowling game made of sponsor logos, and a few bugs we’re keeping.
lanuitdeslosers.ch, built fast: paper wireframes, a bold hand-drawn identity, then Claude Code to prototype and ship. A mouse-tracking hero animation, a bowling game made of sponsor logos, and a few bugs we’re keeping.
Author(s)
Dark mode: necessity or trend
Nous faisons le tri entre idées reçues, réalités techniques et bonnes pratiques de design.
Nous faisons le tri entre idées reçues, réalités techniques et bonnes pratiques de design.
Experiment #2 – Surway, a social experiments game
Pour notre deuxième expérimentation, nous avons relevé le défi de sortir de notre zone de confort en développant Surway, un jeu vidéo jouable directement dans le navigateur, où les actions de chaque joueur restent inscrites pour tous ceux qui suivront.
Pour notre deuxième expérimentation, nous avons relevé le défi de sortir de notre zone de confort en développant Surway, un jeu vidéo jouable directement dans le navigateur, où les actions de chaque joueur restent inscrites pour tous ceux qui suivront.
