JavaScript Modules Import

Import

You can import modules in two ways, based on if they are named exports or default exports.

Example

import { name, age } from "./person.js";

Example

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 { name, age } from "./person.js";

Named Import Rules

Import names must match export names:

Example

import { addd } from './math.js'; // ❌ Error (name mismatch)

You can import multiple items at once:

Example

import { add, PI } from './math.js';

You can rename them using as:

Example

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 text from "./message.js";

Default Import Rules

Default import imports single default exports

Example

import message from "./message.js";

There is no required name. Renaming is allowed.

Example

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() { ... }

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";

Default Import vs Named