There are two main export types:

• Named exports – multiple per file.
• Default export – one per file.

Named Exports

You can export variables, functions, classes, or constants individually.

// utils.js
export const PI = 3.14159;
export const add = (a, b) => a + b;
export function subtract(a, b) { return a - b; }

// Or export at the end
const multiply = (a, b) => a * b;
const divide = (a, b) => a / b;
export { multiply, divide };

Default Export

Each module can have one default export. It's often used for the main component in a file.

// Button.js
export default function Button({ children }) {
  return <button>{children}</button>;
}

// Or
const Button = ({ children }) => <button>{children}</button>;
export default Button;

You can mix named and default exports in the same file.

// helpers.js
export const formatDate = (date) => date.toLocaleDateString();
export const formatCurrency = (amount) => `$${amount}`;
export default function greet(name) {
  return `Hello, ${name}!`;
}

Importing is the counterpart to exporting. The syntax depends on the export type.

Importing Named Exports

import { PI, add, subtract } from './utils.js';
console.log(PI); // 3.14159
console.log(add(2, 3)); // 5

You can alias named imports:

import { add as sum } from './utils.js';
console.log(sum(1, 2)); // 3

Importing Default Exports

import Button from './Button.js';
// Button is the default export
// You can name it anything you want
import MyButton from './Button.js';

Importing Both Default and Named

import greet, { formatDate, formatCurrency } from './helpers.js';
console.log(greet('Alice')); // Hello, Alice!
console.log(formatDate(new Date())); // e.g., 12/08/2026

Namespace Import (Import All)

import * as utils from './utils.js';
console.log(utils.PI); // 3.14159
console.log(utils.add(2, 3)); // 5
// Note: Default export becomes utils.default if present

Importing Side Effects Only

If a module does something (like polyfill) and doesn't export anything:

import './polyfills.js'; // runs the module code

You can re‑export imports from other modules to centralize exports.

// index.js
export { Button } from './Button.js';
export { default as Card } from './Card.js';
export * from './utils.js';
// This allows importing from a single entry point.

Dynamic imports (import()) allow code splitting and lazy loading. They return a promise and are supported in modern browsers and React (via React.lazy).

// Lazy load a component in React
const LazyComponent = React.lazy(() => import('./HeavyComponent.js'));

// Or using dynamic import directly
import('./math.js').then(module => {
  console.log(module.add(2, 3));
});

In a typical React project, you'll see:

• Component files – default export for the component, named exports for helpers.
• Index files – re‑export components from a folder.
• Utility files – named exports for pure functions.
• Hooks files – named exports for custom hooks.
• Configuration – default or named exports for constants.

// Components/Button.js
export default function Button({ children, ...props }) {
  return <button {...props}>{children}</button>;
}
export const ButtonSize = { SMALL: 'sm', LARGE: 'lg' };

// Components/index.js
export { default as Button } from './Button.js';
export { default as Card } from './Card.js';

// Usage in App.js
import { Button, Card } from './Components';
import Button, { ButtonSize } from './Components/Button';

• Named exports – multiple per file; imported with { ... }.
• Default export – one per file; imported without braces.
• Aliasing – use as to rename imports/exports.
• Namespace import – import * as gathers all exports into an object.
• Re‑exporting – centralizes exports via export ... from.
• Dynamic imports – enable code splitting and lazy loading.
• In React, components are usually default exports; utilities are named exports.

Happy coding!