JavaScript modules Cheat Sheet

Angelos Chalaris · Aug 4, 2020 ·

JavaScript, Cheatsheet

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.

Recommended snippets & collections

  • Cheatsheets

    Snippet collection

    A collection of cheatsheets to bookmark and come back to whenever you need to look up anything.

  • Learn everything you need to know about promises and asynchronous JavaScript with this handy cheatsheet.

  • JavaScript arrays have a very robust API offering a plethora of amazing tools. Learn the 4 must-know JavaScript array methods in this quick guide.

  • Naming conventions, while not easy to enforce, make code easier to read and understand. Learn how to name your variables in JavaScript with this handy guide.