Import a Class from another file using JavaScript

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.

Copied!
// 👇️ 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.

Copied!
// 👇️ 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 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'.

The import/export syntax is called JavaScript modules.

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.

Copied!
// 👇️ 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.

Copied!
// 👇️ 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.

Copied!
// 👇️ 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.

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

Copied!
// 👇️ 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.

Copied!
// 👇️ 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.