JavaScript Export

Summary: In this tutorial, you will learn how to use the JavaScript export keyword to export values from a module.

Introduction to JavaScript export keyword

ES6 modules allow you to structure JavaScript code in a modular fashion. Modules provide a standardized way for defining and importing/exporting reusable pieces of code within a JavaScript application.

By default, ES6 modules encapsulate their code. This means that values (variables, functions, classes, etc.) defined in a module are not accessible from outside of the module by default. This prevents naming conflicts and promotes better code structure.

Modules can export values (variables, functions, classes, etc.,) using the export keyword.

The export keyword exports values from a module so that you can use them in other modules. There are two types of exports:

• Named exports
• Default exports

A module can have multiple named exports but only one default export.

Named exports

A module can have multiple named exports. In practice, you use named exports when you need to export multiple values from a module.

Exporting variables

The following example shows how to export a variable count from a module:

let count = 1;
export { count };Code language: JavaScript (javascript)

In this example:

• First, declare a variable count and initialize its value to 100.
• Then, export the count variable by placing them in curly braces that follow the export keyword.

It’s possible to combine the variable declaration and export in a single statement like this:

export let count = 1;Code language: JavaScript (javascript)

Similarly, you can export variables declared using the const keyword:

export const MIN = 0;Code language: JavaScript (javascript)

To export multiple variables, you separate them using a comma (,):

let count = 1;
const MIN = 0, MAX = 10;

export { MIN, MAX, count };Code language: JavaScript (javascript)

Exporting functions

Export functions share the same syntax as exporting variables:

function increase() {
  // ..
}
export { increase };Code language: JavaScript (javascript)

And:

export function increase() {
  // ...
}Code language: JavaScript (javascript)

Exporting classes

Likes variables and functions, you can export classes using the export keyword for example:

class Counter {
  constructor() {
    this.count = 1;
  }
  increase() {
    this.count++;
  }
  get current() {
    return this.count;
  }
}

export { Counter };Code language: JavaScript (javascript)

In this example, we define a Counter class and export it. You can define a class and export it using a single statement as follows:

export class Counter {
  constructor() {
    this.count = 1;
  }
  increase() {
    this.count++;
  }
  get current() {
    return this.count;
  }
}Code language: JavaScript (javascript)

When importing named exports, you need to use the exact name and specify them in curly braces. For example, the following import the Counter class:

import { Counter } from 'module.js';Code language: JavaScript (javascript)

Default exports

A module can have one default export. To export a value using a default export, you use the default export keyword. For example:

let message = 'Hi';
export { default as message };Code language: JavaScript (javascript)

It’s equivalent to the following:

export default let message = 'Hi';Code language: JavaScript (javascript)

When importing a default export, you don’t need to place the variable inside curly braces:

import message from 'module.js';Code language: JavaScript (javascript)

Note that if the message was exported using a named export, you would place it inside the curly braces:

import { message} from 'module.js';Code language: JavaScript (javascript)

This is the main difference between importing a named export and a default export.

Similarly, you can export a function or a class from a module using default exports:

export default function increase() {
   // ..
}Code language: JavaScript (javascript)

And:

export default class Counter {
   // ...
}Code language: JavaScript (javascript)

Renaming named exports

When exporting a value using a named export, you can rename it like this:

class Counter {
  // ..
}

export { Counter as MyCounter };Code language: JavaScript (javascript)

Renaming a value when exporting helps avoid naming conflict. Note that the modules that import the class may also rename it when importing:

import { Counter as MyCounter } from 'module.js';Code language: JavaScript (javascript)

Re-exporting

A module can import values from another module and export them immediately as follows:

import { Counter } from 'module.js';
export { Counter };Code language: JavaScript (javascript)

JavaScript allows you to shorten this using the export from syntax:

export { Counter } from 'module.js';Code language: JavaScript (javascript)

Summary

• Use JavaScript export keyword to export variables, functions, and classes from a module.
• Exports can be named exports and default exports. A module can have multiple named exports but only one default export.