> ## 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 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 `{}`.

```javascript theme={"dark"}
// 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.

```javascript theme={"dark"}
// 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.

```javascript theme={"dark"}
// Mixed import syntax
import defaultExport, { namedExport1, namedExport2 } from 'module-name';
```

<div
  style={{ 
display: "flex", 
justifyContent: "space-between", 
alignItems: "center", 
maxWidth: "754px", 
padding: "1rem 0",
marginBottom: "24px"
}}
>
  <span style={{ fontWeight: "bold", fontSize: "1.25rem", color: "var(--tw-prose-headings)", fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" }}>Tired of Poor JavaScript Skills? Fix That With Deep Grasping!</span>

  <a
    href="https://syntblaze.com"
    target="_blank"
    style={{ 
  marginLeft: "24px",
  textDecoration: "none", 
  backgroundColor: "#007AFF",
  color: "#ffffff", 
  padding: "6px 16px", 
  borderRadius: "16px",
  fontSize: "0.9rem",
  fontWeight: "600",
  textAlign: "center",
  transition: "background-color 0.2s ease"
}}
  >
    Learn More
  </a>
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/skill-tracking.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=b9b0305c93bb501c9e767b5c76c88835" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/skill-tracking.png" />

  <img src="https://mintcdn.com/syntblazellc/23tyuOzaWS88qFlc/images/nuggets.png?fit=max&auto=format&n=23tyuOzaWS88qFlc&q=85&s=c86c80197299762989e9b882419b2109" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/nuggets.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/bite-sized-exercises.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=a65f9a38c37ff28ab73ed783c53c60e3" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/bite-sized-exercises.png" />
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap", marginTop: "12px" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/mastery-chain.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=748a1763454713e679260fbb95f154a2" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/mastery-chain.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-previews.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=242f61448ff5dd6deaaab2dccc13b507" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-previews.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-explanations.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=cf0fc1c31f9cd0fc26716781be05fbc9" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-explanations.png" />
</div>
