import & export0%
Organizing Code with Modules

import & export

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

import & export in Modern JavaScript

The ECMAScript Module (ESM) syntax revolves around two fundamental keywords: export (exposing variables, functions, and classes to external files) and import (consuming those exposed bindings in other files).

1. Named Exports and Imports

Named exports allow you to share multiple identifiers from a single module by name.

Exporting:

JavaScript
// mathUtils.js
 
// Option A: Inline export
export const PI = 3.14159;
 
export function add(a, b) {
return a + b;
}
 
export function subtract(a, b) {
return a - b;
}
 
// Option B: Grouped export declaration at bottom
// export { PI, add, subtract };

Importing:

JavaScript
// app.js
import { PI, add } from './mathUtils.js';
 
console.log(add(10, 5)); // 15
console.log(PI); // 3.14159

2. Default Exports

Each module can have at most one default export. Default exports are useful when a module's primary purpose is to deliver a single class, component, or configuration:

JavaScript
// User.js
export default class User {
constructor(name) {
this.name = name;
}
}

Importing Default Exports:

When importing a default export, you do not use curly braces {} and can choose any name:

JavaScript
// consumer.js
import UserAccount from './User.js'; // Any alias name works!
 
const admin = new UserAccount('Sarah');

3. Renaming with the as Keyword

To avoid naming collisions between imported modules, use as to alias identifiers:

JavaScript
// Renaming during import:
import { render as renderCanvas } from './canvas.js';
import { render as renderDOM } from './domRenderer.js';
 
renderCanvas();
renderDOM();
 
// Renaming during export:
const secretKey = 'XYZ_123';
export { secretKey as apiKey };

4. Namespace Import: import * as

To import all named exports from a module under a single namespace object:

JavaScript
import * as MathService from './mathUtils.js';
 
console.log(MathService.PI);
console.log(MathService.add(20, 30));
console.log(MathService.subtract(50, 10));
Output
mathUtils.js exports:
├── PI: 3.14159
├── add()
└── subtract()
│
▼
import * as MathService
│
▼
MathService.add(20, 30)

5. Dynamic Imports: import()

While standard import statements must be static and at the top of the file, the dynamic import('path') function loads modules asynchronously on demand (code-splitting):

JavaScript
const btn = document.querySelector('#load-editor');
 
btn.addEventListener('click', async () => {
// Module is fetched over network ONLY when button is clicked!
const { RichTextEditor } = await import('./richEditor.js');
const editor = new RichTextEditor();
editor.mount('#editor-container');
});
Interactive Quiz

Practice Quiz

Question 1
How many default exports can a single JavaScript module contain?
Question 2
How do you import a default export from a file named logger.js?
Question 3
What keyword is used to rename an import to avoid name collisions?
Question 4
What does import * as Analytics from './analytics.js' do?
Question 5
What is the primary benefit of dynamic import('./module.js')?
Next Lesson

Organizing Code with Modules

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
What are Modules?Organizing Code with Modules

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext