JavaScript Modules Import
Import
You can import modules in two ways, based on if they are named exports or default exports.
Named imports are constructed using curly braces:
import { name, age } from "./person.js";
Default exports are not:
import message from "./message.js";
Named Imports
Named imports match named exports in a module.
They let you import one or more explicitly named variables or functions from a module.
You must use the exact names enclosed in curly { } braces:
Examples
Import the named exports name and age from the file person.js:
import { name, age } from "./person.js";
Import the named exports add, subtract, and PI from the file math.js:
import { add, subtract, PI } from './math.js';
Try it Yourself »
Named Import Rules
Import names must match export names:
import { addd } from './math.js'; // ❌ Error (name mismatch)
You can import multiple items at once:
import { add, PI } from './math.js';
You can rename them using as:
import { add as addition } from './math.js';
Default Import
Default import is the way to import the primary exported value from a module - the one that was exported using export default.
Defalt imports are the counterpart to default exports.
You can give a default export any name you like, during import, without using curly braces:
Examples
Import a default export from the file message.js:
import text from "./message.js";
import message from "./message.js";
Default Import Rules
Default import imports single default exports
import message from "./message.js";
There is no required name. Renaming is allowed.
import text from "./message.js";
Default + Named Import
A module can provide one main function plus some helpers:
Module File
export default function parse() { ... }
export function validate() { ... }
export function format() { ... }
Module Script
import parse, { validate, format } from './parser.js';
Importing All
You can import all named exports from a module as a single object using the * syntax.
Examples
// Import all named exports from person.js
import * as person from "./person.js";
// Import all named exports from math.js
import * as math from "./math.js";
Default Import vs Named
| Feature | Default Import | Named Import |
|---|---|---|
| Typical use case | One main feature per module | Multiple features |
| Matches export name? | No (you choose) | Yes (must match) |
| Can rename freely? | Always | Only with as |
| Export count | Only one default export allowed | Multiple exports allowed |
