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:
Default exports are not:
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 the named exports add, subtract, and PI from the file math.js:
Named Import Rules
Import names must match export names:
You can import multiple items at once:
You can rename them using as:
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:
Default Import Rules
Default import imports single default exports
There is no required name. Renaming is allowed.
Default + Named Import
A module can provide one main function plus some helpers:
Module File
export function validate() { ... }
export function format() { ... }
Module Script
Importing All
You can import all named exports from a module as a single object using the * syntax.
Examples
import * as person from "./person.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 |