Import two classes with the same name in JavaScript

avatar

Borislav Hadzhiev

Last updated: Mar 29, 2022

banner

Photo from Unsplash

Import two classes with the same name in JavaScript #

To import two classes with the same name, use the as keyword to rename one or both of the imports, e.g. import {Employee as Employee2} from './another-file-2.js';. The as keyword allows us to change the identifying name of the import.

Here is an example of an index.js file, which imports 2 classes named Employee from two other files.

index.js
import {Employee} from './another-file-1.js'; // 👇️ rename to Employee2 import {Employee as Employee2} from './another-file-2.js'; const emp1 = new Employee('Alice', 100); console.log(emp1.name); // 👉️ 'Alice' const emp2 = new Employee2(1, 'web developer'); console.log(emp2.department); // 👉️ 'web developer'

Here are the contents of another-file-1.js.

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

And here are the contents of another-file-2.js.

another-file-2.js
// 👇️ named export export class Employee { constructor(id, department) { this.id = id; this.department = department; } }

The path of the imports in the index.js file assumes that the other files are located in the same directory. For example, if the classes are located one directory up, you would have to import from '../another-file-1.js'.

You can use the as keyword to rename your imports and exports.

For example, we could export one of the classes using a different name.

another-file-1.js
class Employee { constructor(name, salary) { this.name = name; this.salary = salary; } } export {Employee as Employee1}; // 👈️ export as Employee1

We renamed the export of the Employee class to Employee1, so now you would import it as:

index.js
import {Employee1} from './another-file-1.js'; import {Employee as Employee2} from './another-file-2.js'; const emp1 = new Employee1('Alice', 100); console.log(emp1.name); // 👉️ 'Alice' const emp2 = new Employee2(1, 'web developer'); console.log(emp2.department); // 👉️ 'web developer'

The as keyword can be used to rename both imports and exports.

If one or both of your classes use default exports, you don't have to use the as keyword because you are able to directly rename a default export when importing.

another-file-1.js
// 👇️ uses default export export default class Employee { constructor(name, salary) { this.name = name; this.salary = salary; } }

Now, we can import the Employee class as Employee1 without using the as keyword.

index.js
// 👇️ can directly rename when import (because default export) import Employee1 from './another-file-1.js'; import {Employee as Employee2} from './another-file-2.js'; const emp1 = new Employee1('Alice', 100); console.log(emp1.name); // 👉️ 'Alice' const emp2 = new Employee2(1, 'web developer'); console.log(emp2.department); // 👉️ 'web developer'

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 (for functions, classes, variables) in a single file, you would get an error.

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.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.