Import a Class from another file using JavaScript

avatar

Borislav Hadzhiev

Mon Mar 28 20223 min read

banner

Photo by freestocks

Import a Class from another file using JavaScript #

To import a class from another file in JavaScript:

  1. Export the class from file A, e.g. export class Employee {}.
  2. Import the class in file B as import {Employee} from './another-file.js'.
  3. Instantiate the class in file B.

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

another-file.js
// ๐Ÿ‘‡๏ธ named export export class Employee { constructor(name, salary) { this.name = name; this.salary = salary; } increaseSalary() { this.salary += 100; } }

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

index.js
// ๐Ÿ‘‡๏ธ named import import {Employee} from './another-file.js'; const employee = new Employee('Alice', 100); console.log(employee.name); // ๐Ÿ‘‰๏ธ 'Alice' console.log(employee.salary); // ๐Ÿ‘‰๏ธ 100 employee.increaseSalary(); console.log(employee.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 another-file.js was located one directory up, you'd have to import as 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 JavaScript modules.

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.

Let's look at an example of how we would import a class that was exported using a default export.

Here are the contents of another-file.js.

another-file.js
// ๐Ÿ‘‡๏ธ default export export default class Employee { constructor(name, salary) { this.name = name; this.salary = salary; } increaseSalary() { this.salary += 100; } }

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.

And here is how we would import the class using a default import.

index.js
// ๐Ÿ‘‡๏ธ default import import Employee from './another-file.js'; const employee = new Employee('Alice', 100); console.log(employee.name); // ๐Ÿ‘‰๏ธ 'Alice' console.log(employee.salary); // ๐Ÿ‘‰๏ธ 100 employee.increaseSalary(); console.log(employee.salary); // ๐Ÿ‘‰๏ธ 200

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

We could have also used a different name when importing the class, e.g. FooBar.

index.js
// ๐Ÿ‘‡๏ธ default import import FooBar from './another-file.js'; const employee = new FooBar('Alice', 100); console.log(employee.name); // ๐Ÿ‘‰๏ธ 'Alice' console.log(employee.salary); // ๐Ÿ‘‰๏ธ 100 employee.increaseSalary(); console.log(employee.salary); // ๐Ÿ‘‰๏ธ 200

This works, but is confusing and should be avoided.

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.

You can also mix and match. Here is an example of a file that uses both a default and a named export.

another-file.js
// ๐Ÿ‘‡๏ธ default export export default class Employee { constructor(name, salary) { this.name = name; this.salary = salary; } increaseSalary() { this.salary += 100; } } // ๐Ÿ‘‡๏ธ named export export class Person { constructor(name, age) { this.name = name; this.age = age; } increaseAge() { this.age += 1; } }

And here is how you would import the two classes.

index.js
// ๐Ÿ‘‡๏ธ default and named imports import Employee, {Person} from './another-file.js'; const employee = new Employee('Alice', 100); console.log(employee.name); // ๐Ÿ‘‰๏ธ 'Alice' console.log(employee.salary); // ๐Ÿ‘‰๏ธ 100 employee.increaseSalary(); console.log(employee.salary); // ๐Ÿ‘‰๏ธ 200 const person = new Person('Bob', 30); person.increaseAge(); console.log(person.age); // ๐Ÿ‘‰๏ธ 31

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.

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

Copyright ยฉ 2022 Borislav Hadzhiev