Flash cards
Review the key moves
What is the main idea behind JavaScript Modules Import?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___ { name, age } from "./person.js";Put the learning moves in the order that makes the concept easiest to apply.
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";
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 :
import { name, age } from "./person.js";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:
import text 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.
// Import all named exports from person.js
import * as person from "./person.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 |