Borislav Hadzhiev
Mon Mar 28 2022ยท3 min read
Photo by freestocks
To import a class from another file in JavaScript:
A
, e.g. export class Employee {}
.B
as import {Employee} from './another-file.js'
.B
.Here is an example of exporting a class from a file called 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
.
// ๐๏ธ 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'
.
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
.
// ๐๏ธ 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.
// ๐๏ธ 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
.
// ๐๏ธ 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.
// ๐๏ธ 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.
// ๐๏ธ 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.