How To Import A Class From Another File In JavaScript

Hello guys! Today we will share a guide on how to import a class from another file in JavaScript. This is the most basic skill when you work with JavaScript and HTML.

Import a class from another file in JavaScript

Here are two different ways we want to introduce it to you. Don’t just read. Follow the examples below.

Import a default class

In JavaScript, when you want to declare a class in a different file and then you want to import to the current file to use that class. You must import them. If the class in that file was declared as a default class then you must import it as a default class. For example:

You have declared a default class in a file named “Student.js”:

export default class Student {
  constructor(id, age) {
    this.id = id;
    this.age = age;
  }
  study() {
    console.log('studying!');
  }
}

And then in the current file in which you are working, you need to import the class from Student.js:

// Import default class Student
import Student from 'Student.js';

// Create a new object of class Student declared
var student = new Student(12345, 10);

// Accessing the attributes of object of class Student
console.log(student.id);
console.log(student.age); 

// Accessing the method of object of class Student
student.study();

Output

12345
10
studying!

The example above points out that we have imported the default class which is Student (we declared them in the file Student.js). So remember the syntax when importing a default class is:

import classname from path

Import a named class

The main difference between a named and a default export is the ability to declare many named exports in one file, but a file can only consist of one single default export only.

Syntax:

import {classname} from path

To import a named class from another file in JavaScript, you must wrap the classname in a pair of curly braces in its syntax, for example:

You have declared a named class in a file named “Student.js”:

export class Student {
  constructor(id, age) {
    this.id = id;
    this.age = age;
  }

  study() {
    console.log('studying!');
  }
}

And then in the current file in which you are working, you need to import the class from Student.js:

// Import named class Student
import {Student} from 'Student.js';

// Create a new object of class Student declared
var student = new Student(12345, 10);

// Accessing the attributes of object of class Student
console.log(student.id);
console.log(student.age); 

// Accessing the method of object of class Student
student.study();

Output

12345
10
studying!

As you can see, to export and import a named class may have a small difference in the syntax. However, you must import and export in the correct way, as guided in this article. Otherwise, it will cause the error “The requested module does not provide an export named” in JavaScript. If you encounter that error, please click at that article and read the instructions to solve the problem.

Summary

So we have introduced some ways to import a class from another file in JavaScript. These approaches are widely used when working with imports/exports. So it is recommended that you should practice a lot with them. We hope you enjoyed this article.

Have a nice day!

Maybe you are interested:

• Import a JavaScript file into a TypeScript file
• Import Functions from another file using JavaScript
• Export all functions from a file in JavaScript

Edward Anderson

I’m Edward Anderson. My current job is as a programmer. I’m majoring in information technology and 5 years of programming expertise. Python, C, C++, Javascript, Java, HTML, CSS, and R are my strong suits. Let me know if you have any questions about these programming languages.

---

Name of the university: HCMUT
Major: CS
Programming Languages: Python, C, C++, Javascript, Java, HTML, CSS, R