Apply for the next session

ESM module exports and import patterns

Last updated: December 7, 2022

Little note: Modules always use strict (and are in strict mode) – so, you don’t need to write it.

The basics

A single thing using default export

module.js
const someReference = "Hello!";

export default someReference;

You could have just done export default "Hello!"; too.
context.js
import whatever from './module.js';

console.log(whatever);

In this case (when you import it), you can give it whatever name you want. It already knows that there’s only one thing that could be imported, so the name is up to you.
other-module.js
function myBigFunction() {
	return "My Big Function's outcome.";
}

export default myBigFunction;

This would be the same with a class too.
other-module.js
export default function myBigFunction() {
	return "My Big Function's outcome.";
}

You could condense it like this is you want. It will lead to less possibility of spelling the export name incorrectly, but it’s also harder to read.
context.js
import whatever from './module.js';
import myBigFunction from './other-module.js';

console.log( whatever );
console.log( myBigFunction() );

Again, you can name it what you want. Note that because it’s a function, you’ll probably want to invoke it ().

You probably wont find yourself exporting a single like in the first example, but when you know that your module is only exporting one thing – then export default is probably the way to go.

Standard export

module.js
export const someReference = "Hello!";

export function myBigFunction() {
	return "My Big Function's outcome.";
}

export class User {
	constructor(name) {
		this.name = name;
	}
}

You could do this with as many things as you want.
module.js
const someReference = "Hello!";

function myBigFunction() {
	return "My Big Function's outcome.";
}

class User {
	constructor(name) {
		this.name = name;
	}
}

export {
	someReference,
	myBigFunction,
	User,
}

Or you could also create a nice and clear export block like this.
context.js
import { someReference, myBigFunction, User } from './module.js';

const user = new User("Ivy");

console.log( someReference, myBigFunction(), user.name );

In this case, everything that is exported is essentially added to an object. To pop them out and use them, you’ll have to get them out of there by destructuring it.

Revealing module pattern

module.js
const __secretNumber = 27;

function __double(number) {
	return number * 2;
}

function askQuestion() {
	const total = __double(__secretNumber) + __double(__secretNumber);
	return `
					If the favorite number was multiplied by 2 (twice) 
					and then totalled to ${total}, what was the secret number?
		`;
}

export {
	askQuestion,
}

In many cases, you don’t want to expose everything in the module. You’ll have some references and their values and some functions and those are all just for the sake of preparing another function or value to be exported. Sometimes people use conventions like double underscore to denote that this property is “private.”

Then, at the end of the file you can choose which pieces you want to reveal.
context.js
import { askQuestion } from './module.js';

console.log( askQuestion() );

Other tricks you could use

Importing as

module.js
export const someLongReference = "Hello!";
context.js
import { someLongReference as greeting } from './module.js';

console.log( greeting );

In some cases, you want to rename them. You can also do that when you’re exporting too.

There’s 10x more you could learn about the little tricks – but just wait until you absolutely need them.

Let us know when you get to a situation where you need something that isn’t above – and let’s talk about it. We’ll add anything more down here in order of importance.

It would be a waste of time to try and memorize all of the options.

JavaScript.info: modules, imports and exports

MDN: modules, import, export
Apply for the next session