A not so in-depth explanation of ES6 modules (import and export)

Sam Pakvis
Nov 24, 2016 · 2 min read

Export is ES6' way of saying “Make this code available for other modules”. Import is the opposite, and tries to get code from other modules.

But what is a module?

To explain things correct, we first need to talk about ES6 modules. And this is going to be a short one. A module is nothing more than a chunk of javascript code (that has its own file).

Why modules?

First of all, and the most simplest reason: when we use modules, we split our code into different files. This way, we can separate our code in any way we want.

A big part of front-end developers will use this to just keep things uncluttered and make their code easy to maintain. Cool know-it-all developers with doubtful tattoos and turtleneck sweaters can use modules to prevent issues regarding scope, variable naming and other awesome advanced coding stuff.

Exporting

Let’s pretend we’re writing a module full of helper functions and we want to use those helper functions in multiple other modules. In order to use certain pieces of code from a module in other files/modules, we have to.. export it.

export function sayName(name) {
console.log(`Hello ${name}`);
}
export function sayAnimal(animal) {
console.log(`What animal? ${animal}`);
}
export default function whatsYourFlava(flava) {
console.log(`I'm liking ${flava}?`);
}

We’ll call this file Helpers.js. Remember: when using export, the only thing we’re saying is: “Make this piece of code available outside this module”.

The first two are named exports. When importing a named export, you’ll need to specifically import your export by name. So in this case: sayName and sayAnimal. The third one is a default export. This is the piece of code that will get imported from the module, when you don’t specify a certain name of a certain piece of code. That’s why the smart folks at the javascript company named it a export default.

Importing

Let’s import those amazing helpful helper functions:

import { sayName, sayAnimal } from './Helpers';
import whatsYourFlava from './Helpers';
sayName('Sam');
//Hello Sam
sayAnimal('Giraffe');
//What animal? Giraffe
whatsYourFlava('grapes');
//I'm liking grapes

When importing named exports, you’ll have to wrap them in curly braces. If you’re importing multiple exports from the same module, you can concatenate them, comma based, and use them in the same wrapping curly braces. This looks a lot like destructuring in ES6, but actually doesn’t have anything to do with it. Just so you know.. you know.

When you import, and omit the curly braces, it will look for the default export in the module you’re importing from. Because it knows it has to look for the default export, you can use any random name for your import. This will work too:

import bruhGetMoney from './Helpers';bruhGetMoney('money');
//I'm liking money

And that’s it. Thanks for reading!

Sam Pakvis

Written by

Front-end r&b singer @ Burst, from Rotterdam, the Netherlands. I'm rocking that React flava. Craig David approves.