> ## 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.
# JavaScript Default Import
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
```javascript theme={"dark"}
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`)
```javascript theme={"dark"}
const internalValue = 42;
// The module exposes a single default export
export default internalValue;
```
### Importing Module (`target.js`)
```javascript theme={"dark"}
// 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:**
```javascript theme={"dark"}
import defaultIdentifier, { namedIdentifier1, namedIdentifier2 } from 'module-specifier';
```
**Combined with a Namespace Import:**
```javascript theme={"dark"}
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:
```javascript theme={"dark"}
// Standard default import syntax
import myIdentifier from './module.js';
// Equivalent named import syntax using aliasing
import { default as myIdentifier } from './module.js';
```
Tired of Poor JavaScript Skills? Fix That With Deep Grasping!
Learn More
