Default and Named Exports

ES6 Default and Named Exports Overview

ES6 Modules introduced export and import statements that allow JavaScript code to be organized into reusable modules. There are two types of exports:

• Default Export — Export one primary value from a module.
• Named Export — Export multiple variables, functions, classes, or constants.

Modern JavaScript frameworks including React, Vue, Angular, Node.js, Next.js, Vite, Astro, and Web Components heavily rely on ES Modules.

What is a Default Export?

A module can have only one default export. The importing file may choose any variable name for the imported value.

// User.js

export default class User {

  constructor(name) {
    this.name = name;
  }

}

Importing a Default Export

// app.js

import User
from "./User.js";

const user =
  new User("Alice");

console.log(user);

The imported name does not have to match the exported class name.

Renaming Default Imports

import Employee
from "./User.js";

const employee =
  new Employee("David");

Default imports can use any valid variable name.

Default Export Function

// greet.js

export default function greet(name) {

  return "Hello " + name;

}

// app.js

import greet
from "./greet.js";

console.log(
  greet("John")
);

Default Export Anonymous Function

export default function(name) {

  return "Hello " + name;

};

Anonymous functions can also be exported as default.

Default Export Object

export default {

  apiUrl: "/api",

  timeout: 5000

};

import config
from "./config.js";

console.log(config.apiUrl);

Default Export Array

export default
[
  "HTML",
  "CSS",
  "JavaScript"
];

What are Named Exports?

Named exports allow multiple values to be exported from one module.

// math.js

export const PI = 3.14;

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

export function multiply(a, b) {
  return a * b;
}

Import Named Exports

import
{
  PI,
  add,
  multiply
}
from "./math.js";

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

Rename Named Imports

import
{
  add as sum
}
from "./math.js";

console.log(
  sum(5, 10)
);

Export Variables Later

const name =
  "John";

const age =
  25;

export
{
  name,
  age
};

Export Functions Later

function login() {
  console.log("Login");
}

function logout() {
  console.log("Logout");
}

export
{
  login,
  logout
};

Export Classes

export class User {

  constructor(name) {
    this.name = name;
  }

}

export class Admin
extends User {

}

Import Everything

import * as MathUtils
from "./math.js";

console.log(
  MathUtils.PI
);

console.log(
  MathUtils.add(2, 3)
);

Using Default and Named Exports Together

// User.js

export default class User {

}

export const VERSION =
  "1.0.0";

export function validate() {

}

import User,
{
  VERSION,
  validate
}
from "./User.js";

A module may contain one default export and multiple named exports.

Export Aliases

const username =
  "John";

export
{
  username as userName
};

import
{
  userName
}
from "./user.js";

Re-export Modules

export
{
  add,
  multiply
}
from "./math.js";

export
{
  default
}
from "./User.js";

Barrel File Example

// index.js

export
{
  default as User
}
from "./User.js";

export
{
  default as Product
}
from "./Product.js";

export *
from "./utils.js";

Barrel files simplify imports throughout large applications.

Real World Example - React Component

export default function Button() {

  return "Button";

}

import Button
from "./Button.js";

Real World Example - Utility Module

export function formatDate() {

}

export function formatCurrency() {

}

export function slugify() {

}

Real World Example - Configuration Module

export default
{

  apiUrl: "/api",

  timeout: 5000,

  version: "2.0"

};

Real World Example - Constants

export const API_URL =
  "/api";

export const MAX_USERS =
  100;

export const APP_NAME =
  "Dashboard";

Default Export vs Named Export

When to Use Default Exports

• React components.
• Vue components.
• Configuration files.
• Main service classes.
• Single reusable objects.
• Main application modules.

When to Use Named Exports

• Utility functions.
• Constants.
• Enums.
• Multiple helper functions.
• Validation utilities.
• Shared business logic.

Common Mistakes

• Using braces with default imports.
• Forgetting braces for named imports.
• Creating multiple default exports.
• Mixing CommonJS and ES Modules.
• Using incorrect file paths.
• Circular dependencies.
• Using default exports for utility libraries.
• Exporting everything unnecessarily.

Best Practices

• Use one default export for the primary module.
• Use named exports for reusable helpers.
• Prefer named exports in utility libraries.
• Create barrel files for large projects.
• Keep exports organized by feature.
• Avoid circular imports.
• Use meaningful export names.
• Export only what consumers need.
• Prefer ES Modules over CommonJS for modern applications.
• Maintain consistent export style across the project.

Interview Questions

• What is the difference between default and named exports?
• How many default exports are allowed?
• Can a module contain both default and named exports?
• Why are named exports preferred in utility libraries?
• What are barrel files?
• When should default exports be used?
• How do you rename imports?
• What does import * do?
• How does tree shaking work with named exports?
• What are common module organization strategies?