Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt

Use this file to discover all available pages before exploring further.

A default import is an ECMAScript 6 (ES6) module syntax used to bind a module’s single default export to a local identifier. Unlike named imports, default imports do not use destructuring syntax (curly braces) and do not require the importing identifier to match the original exported name. This allows the importing module to assign any valid, locally scoped variable name to the imported binding.

​
Syntax

import localIdentifier from 'module-specifier';
  • localIdentifier: A developer-defined variable name that will be bound to the default export of the target module.
  • module-specifier: A string literal representing the path or URI to the module containing the default export.

​
Mechanics

A default import strictly relies on the presence of an export default statement within the source module. Because the ES6 module specification restricts a module to exactly one default export, the JavaScript engine automatically resolves the default import to that specific export, regardless of the localIdentifier provided.

​
Source Module (source.js)

const internalValue = 42;

// The module exposes a single default export
export default internalValue;

​
Importing Module (target.js)

// The default export is bound to an arbitrary local identifier
import myCustomName from './source.js';

console.log(myCustomName); // 42

​
Syntactic Variations

Default imports can be combined with named imports or namespace imports within a single declaration. When combining them, the default import must always precede the named or namespace imports. Combined with Named Imports: 
import defaultIdentifier, { namedIdentifier1, namedIdentifier2 } from 'module-specifier';
Combined with a Namespace Import: 
import defaultIdentifier, * as namespaceIdentifier from 'module-specifier';

​
Under the Hood

In the ES6 module record, a default export is technically a named export where the exported name is literally the string "default". Therefore, a default import is syntactic sugar for renaming the "default" export. The following two statements are functionally identical: 
// Standard default import syntax
import myIdentifier from './module.js';

// Equivalent named import syntax using aliasing
import { default as myIdentifier } from './module.js';
Master JavaScript with Deep Grasping Methodology!Learn More