Named Import

A named import is an ECMAScript 6 (ES6) module syntax construct used to extract specific, explicitly named bindings (variables, functions, or classes) from an external module. Unlike default imports, named imports require the imported identifier to strictly match the exported identifier’s name and must be enclosed in curly braces {}.

// Basic syntax for a single named import
import { exportName } from 'module-name';

// Syntax for multiple named imports
import { export1, export2 } from 'module-name';

Technical Mechanics

Strict Identifier Matching The JavaScript engine resolves named imports by looking for an exact string match between the identifier in the import statement and the identifier in the source module’s export statement. If the source module does not explicitly export that exact name, a SyntaxError is thrown.

Aliasing To prevent namespace collisions within the local module scope, named imports can be renamed at the time of import using the as keyword. This binds the exported value to a new local identifier.

// Aliasing a named import
import { originalExportName as localAlias } from 'module-name';

Live, Read-Only Bindings Named imports do not create static copies of the exported values. Instead, they create live, read-only references to the bindings in the source module.

• Live: If the exporting module mutates the underlying value of the exported binding, the imported binding will immediately reflect that change.
• Read-Only: The importing module cannot reassign the imported identifier. Attempting to do so (e.g., exportName = 'newValue') results in a TypeError.

Composition with Default Imports Named imports can be declared in the same statement as a default import. When combining them, the default import must precede the named imports, separated by a comma.

// Mixed import syntax
import defaultExport, { namedExport1, namedExport2 } from 'module-name';

Master JavaScript with Deep Grasping Methodology!

Learn More