Loading lesson path
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 message from "./message.js";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 { } bracesImport 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';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';import { add as addition } from './math.js';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 a default export from the file message.js:
import text from "./message.js";
import message from "./message.js";Default import imports single default exports import message from "./message.js";There is no required name. Renaming is allowed.
import text from "./message.js";Formula
Default + Named ImportA 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';Formula
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";
// Import all named exports from math.js import * as math from "./math.js";No (you choose) Yes (must match)