JavaScript modules Cheat Sheet

JavaScript, Cheatsheet · Jun 12, 2021

Named exports

/* environment.js */
export const key = 'this-is-a-secret';

/* index.js */
import { key } from 'environment';

Named exports use a name.
A module can have any number of named exports.
Import and export name should be the same.
Importing requires {}.

Default exports

/* environment.js */
const environment = {
  key: 'this-is-a-secret',
  port: 8000
};

export default environment;
/* index.js */
import environment from 'environment';

const { key, port } = environment;

Default exports expose a default value, use the default keyword.
A module can only have one default export.
Import name can be anything.
Importing does not require {}.

Default + named

/* environment.js */
export const envType = 'DEV';

const environment = {
  key: 'this-is-a-secret',
  port: 8000
};

export default environment;

/* index.js */
import { envType }, environment from 'environment';

const { key, port } = environment;

Default and named exports can be mixed.
Rules about number of exports and naming conventions apply as before.
Import rules apply as before, can be mixed if necessary.

Export list

/* environment.js */
const key = 'this-is-a-secret';
const port = 8000;

export {
  key,
  port
};

/* index.js */
import { key, port } from 'environment';

An export list is a compact way to write multiple named exports.
Rules about number of exports, naming conventions and import rules are the same as those of named exports.
Export lists are not objects.

Rename export

/* environment.js */
const key = 'this-is-a-secret';

export { key as authKey };

/* index.js */
import { authKey } from 'environment';

Named exports can make use of the as keyword to rename an export.
Import name should be the same as the renamed export.

Rename import

/* environment.js */
export const key = 'this-is-a-secret';

/* index.js */
import { key as authKey } from 'environment';

Named imports can make use of the as keyword to rename an import.
Import name (before the as keyword) should be the same as the export.

Import all

/* environment.js */
export const envType = 'DEV';

const environment = {
  key: 'this-is-a-secret',
  port: 8000
};

export default environment;

/* index.js */
import * as env from 'environment';

const { default: { key, port}, envType } = environment;

Use * to import everything a module exports.
Named exports will be available by their names on the imported object.
Default export will be available as the default key on the imported object.

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.