How to export a Class in JavaScript

avatar

Borislav Hadzhiev

Tue Mar 29 20223 min read

banner

Photo by Alex Gorey

Export a Class in JavaScript #

Use named exports to export a class in JavaScript, e.g. export class Employee {}. The exported class can be imported by using a named import as import {Employee} from './another-file.js'. You can use as many named exports as necessary in a file.

Here is an example of exporting a class from a file called another-file.js.

another-file.js
// 👇️ named export export class Employee { constructor(id, name, salary) { this.id = id; this.name = name; this.salary = salary; } increaseSalary() { this.salary += 100; } }

Note that using export on the same line as the classes' definition is the same as exporting the class as an object after it has been declared.

another-file.js
class Employee { constructor(id, name, salary) { this.id = id; this.name = name; this.salary = salary; } increaseSalary() { this.salary += 100; } } // 👇️ named export (same as previous code snippet) export {Employee};

Here is how we would import the class in a file called index.js.

index.js
import {Employee} from './another-file.js'; const emp = new Employee(1, 'Alice', 100); console.log(emp.id); // 👉️ 1 console.log(emp.name); // 👉️ "Alice" emp.increaseSalary(); console.log(emp.salary); // 👉️ 200

Make sure to correct the path that points to the another-file.js module if you have to. The example above assumes that another-file.js and index.js are located in the same directory.

For example, if you were importing from one directory up, you would do import {Employee} from '../another-file.js'.

We wrapped the name of the class in curly braces when importing it - this is called a named import.

The import/export syntax is called ES6 Modules in JavaScript.

In order to be able to import a class from a different file, it has to be exported using a named or default export.

The example above uses a named export and a named import.

The main difference between named and default exports and imports is - you can have multiple named exports per file, but you can only have a single default export.

If you try to use multiple default exports in a single file, you would get an error.

another-file.js
// 👇️ 2 default exports in same file = error export default class Employee { constructor(id, name, salary) { this.id = id; this.name = name; this.salary = salary; } increaseSalary() { this.salary += 100; } } // ⛔️ SyntaxError: Duplicate export of 'default' export default class Person {}

IMPORTANT: If you are exporting a variable (or an arrow function) as a default export, you have to declare it on 1 line and export it on the next. You can't declare and default export a variable on the same line.

Having said that, you can use 1 default export and as many named exports as you need in a single file.

Let's look at an example that uses both - default and named exports.

another-file.js
// 👇️ default export export default class Employee { constructor(id, name, salary) { this.id = id; this.name = name; this.salary = salary; } increaseSalary() { this.salary += 100; } } // 👇️ named export export class Person { constructor(name, age) { this.name = name; this.age = age; } }

And here is how you would import the two classes.

index.js
// 👇️ default and named imports import Employee, {Person} from './another-file.js'; const emp = new Employee(1, 'Alice', 100); console.log(emp.id); // 👉️ 1 console.log(emp.name); // 👉️ "Alice" const person = new Person('Bob', 30); console.log(person.name); // 👉️ "Bob"

Notice that we didn't wrap the default import in curly braces.

We used a default import to import the Employee class and a named import to import the Person class.

Note that you can only have a single default export per file, but you can have as many named exports as necessary.

In my experience, most real world codebases exclusively use named exports and imports because they make it easier to leverage your IDE for autocompletion and auto-imports.

You also don't have to think about which members are exported with a default or named export.

Use the search field on my Home Page to filter through my more than 1,000 articles.