JavaScript modules let you split code across files and share only what is needed. There are two types of exports: named and default.

You can export multiple things from a single file. Each export has a specific name that the importer must use.

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

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

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

The names inside { } must exactly match the exported names.

If an imported name is too long, conflicts with an existing variable, or you just want a shorter name, use as to create an alias.

import { subtract as minus, PI as circlePI } from './utils';
console.log(minus(10, 4)); // 6
console.log(circlePI);     // 3.14159

You can also alias on the export side:

// utils.js
function multiply(a, b) {
  return a * b;
}
export { multiply as times };

import { times } from './utils';

console.log(times(3, 4)); // 12

Each file can have one default export. It represents the main thing the file provides. No curly braces needed when importing.

// greet.js
export default function greet(name) {
return Hello, ${name}!;
}

import greet from './greet';
console.log(greet('Arjun')); // Hello, Arjun!

You can give a default import any name you want — it does not have to match the original function name.

import sayHello from './greet'; // ✅ also works
console.log(sayHello('Arjun')); // Hello, Arjun!

You can import both in a single statement — the default comes first, outside the { }, and named exports go inside.

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

import add, { subtract, PI } from './mathUtils';

console.log(add(2, 3));      // 5
console.log(subtract(5, 2)); // 3
console.log(PI);             // 3.14159

• A file can have only one default export but many named exports.
• Named imports must use { } and match the exported name exactly (unless aliased).
• Default imports have no { } and can be named anything.
• The default import always comes before { } when combining both.

Part of the React Project Wiki — see also: JSX · React Components · React Project Structure

JavaScript modules let you split code across files and share only what is needed. There are two types of exports: named and default.

You can export multiple things from a single file. Each export has a specific name that the importer must use.

// utils.js

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

export const PI = 3.14159;

import { add } from './utils';

console.log(add(2, 3)); // 5

import { add, subtract, PI } from './utils';

console.log(add(2, 3));      // 5
console.log(subtract(5, 2)); // 3
console.log(PI);             // 3.14159

The names inside { } must exactly match the exported names.

If an imported name is too long, conflicts with an existing variable, or you just want a shorter name, use as to create an alias.

import { subtract as minus, PI as circlePI } from './utils';

console.log(minus(10, 4)); // 6
console.log(circlePI);     // 3.14159

You can also alias on the export side:

// utils.js
function multiply(a, b) {
  return a * b;
}

export { multiply as times };

import { times } from './utils';

console.log(times(3, 4)); // 12

Each file can have one default export. It represents the main thing the file provides. No curly braces needed when importing.

// greet.js

export default function greet(name) {
  return `Hello, ${name}!`;
}

import greet from './greet';

console.log(greet('Arjun')); // Hello, Arjun!

You can give a default import any name you want — it does not have to match the original function name.

import sayHello from './greet'; // ✅ also works

console.log(sayHello('Arjun')); // Hello, Arjun!

You can import both in a single statement — the default comes first, outside the { }, and named exports go inside.

// mathUtils.js

export default function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

export const PI = 3.14159;

import add, { subtract, PI } from './mathUtils';

console.log(add(2, 3));      // 5
console.log(subtract(5, 2)); // 3
console.log(PI);             // 3.14159

• A file can have only one default export but many named exports.
• Named imports must use { } and match the exported name exactly (unless aliased).
• Default imports have no { } and can be named anything.
• The default import always comes before { } when combining both.