JavaScript modules Cheat Sheet

Angelos Chalaris · 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.

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.

  • JavaScript naming conventions

    JavaScript, Variable

    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.