Skip to main content
A named export is an ECMAScript 6 (ES6) module mechanism that allows developers to expose multiple specific bindings (variables, functions, or classes) from a single module using their exact identifier names. Unlike default exports, a single module can contain an unlimited number of named exports. Importing these bindings requires the consumer to use the exact matching identifiers or explicitly alias them.

​
Syntax Variations

Named exports can be declared inline at the point of creation, or grouped together in a single export statement, typically at the end of the module. Inline Exporting: 
export const MAX_RETRIES = 3;
export let currentStatus = 'idle';
export function initialize() {}
export class DataParser {}
Grouped Exporting: 
const timeout = 5000;
function parse() {}
class Formatter {}

export { timeout, parse, Formatter };
Aliased Exporting: You can change the identifier name as it is exported using the as keyword. 
const internalName = 'System';
function internalProcess() {}

export { 
  internalName as ExternalName, 
  internalProcess as process 
};

​
Import Mechanics

To consume named exports, the importing module must use curly braces containing the exact identifiers defined by the exporting module. While this resembles object destructuring, it is a distinct syntactic construct specific to the ES6 module system. 
// Standard named import
import { MAX_RETRIES, initialize } from './module.js';

// Aliased named import (renaming the binding locally)
import { ExternalName as SystemName } from './module.js';

// Namespace import (groups all named exports into a single module object)
import * as ModuleAPI from './module.js';

​
Technical Characteristics

  • Live Bindings: Named exports do not export values by copy; they export live references to the bindings. If the exporting module mutates an exported variable, the importing module will immediately reflect that updated value. However, the imported binding is strictly read-only from the consumer’s side.
  • Static Structure: Export statements must be declared at the top level of the module scope. They cannot be nested inside functions, if statements, or loops. This strict static structure allows the JavaScript engine to perform static analysis, enabling features like tree-shaking (dead code elimination) during the build process.
  • Hoisting: Because ES6 modules are statically analyzed before execution, named exports are resolved during the parsing phase. The physical location of the export statement within the file does not affect the availability of the binding to importing modules.
Tired of Poor JavaScript Skills? Fix That With Deep Grasping!Learn More