Introduction

JavaScript modules allow developers to organize code into separate files, making applications easier to maintain and scale. When a module mainly provides one primary value, JavaScript offers the default export feature.

A default export allows a module to export a single variable, function, class, object, or value as its main export. Unlike named exports, default exports do not require curly braces when importing and can be imported using any valid name.

For automation engineers, default exports are commonly used for exporting page objects, utility classes, configuration objects, API clients, database connections, and reusable helper functions in frameworks such as Playwright, Selenium, and Cypress.

What is a Default Export?

A default export is the primary value exported from a JavaScript module.

Each module can have only one default export.

Other files can import the default export without using curly braces.

Syntax

export default value;

The value can be:

A function
A class
An object
A variable
Any JavaScript expression

Default Exporting a Function

export default function greet() {

    console.log("Welcome");

}

Importing:

import greet from "./greet.js";

greet();

Output

Welcome

Example 1: Default Export a Variable

message.js

const message = "Hello JavaScript";

export default message;

main.js

import message from "./message.js";

console.log(message);

Output

Hello JavaScript

Example 2: Default Export a Function

math.js

export default function multiply(a, b) {

    return a * b;

}

main.js

import multiply from "./math.js";

console.log(multiply(5, 6));

Output

Example 3: Default Export an Object

config.js

export default {

    appName: "Inventory System",

    version: "1.0"

};

main.js

import config from "./config.js";

console.log(config.appName);

console.log(config.version);

Output

Inventory System

1.0

Example 4: Default Export a Class

Employee.js

export default class Employee {

    constructor(name) {

        this.name = name;

    }

}

main.js

import Employee from "./Employee.js";

const employee = new Employee("John");

console.log(employee.name);

Output

John

Example 5: Import Using Any Name

The imported name does not need to match the exported function name.

greet.js

export default function greet() {

    console.log("Hello");

}

main.js

import welcomeMessage from "./greet.js";

welcomeMessage();

Output

Hello

This flexibility is one of the main advantages of default exports.

Example 6: Export an Arrow Function

calculator.js

const add = (a, b) => a + b;

export default add;

main.js

import add from "./calculator.js";

console.log(add(12, 8));

Output

Real-World Example

Export an application configuration object.

config.js

export default {

    baseURL: "https://example.com",

    timeout: 5000

};

app.js

import config from "./config.js";

console.log(config.baseURL);

console.log(config.timeout);

Output

https://example.com

5000

Another example:

Export a logger function.

logger.js

export default function log(message) {

    console.log(message);

}

main.js

import log from "./logger.js";

log("Application started");

Output

Application started

Automation Testing Example

Default exports are commonly used in automation frameworks for reusable components.

Playwright Example

Export a page object.

LoginPage.js

export default class LoginPage {

}

login.spec.js

import LoginPage from "./LoginPage.js";

console.log("Page object imported");

Output

Page object imported

Selenium Example

Export browser utilities.

BrowserUtils.js

export default function launchBrowser() {

    console.log("Launching browser");

}

Output

Launching browser

Cypress Example

Export login helper.

loginHelper.js

export default function login() {

    console.log("Logging in");

}

Output

Logging in

API Testing Example

Export an API client.

apiClient.js

export default {

    baseURL: "https://api.example.com"

};

Output

https://api.example.com

Data-Driven Testing Example

Export test data.

users.js

export default [

    {

        username: "admin",

        password: "admin123"

    }

];

Output

[
  {
    username: "admin",
    password: "admin123"
  }
]

Default Export vs Named Export

Feature	Default Export	Named Export
Number allowed	One	Multiple
Curly braces during import	Not required	Required
Imported name	Can be any name	Must match the exported name (unless renamed with `as`)
Best used for	One primary value	Multiple related values

Common Mistakes

Using Curly Braces

Incorrect:

import { greet } from "./greet.js";

Correct:

import greet from "./greet.js";

Multiple Default Exports

Incorrect:

export default function one() {}

export default function two() {}

A module can have only one default export.

Forgetting the `default` Keyword

Incorrect:

export function greet() {

}

This creates a named export, not a default export.

Best Practices

Use default exports for the primary functionality of a module.
Use named exports when a module exposes multiple values.
Keep one responsibility per module.
Choose meaningful file names.
Avoid mixing many unrelated exports in one module.
Import default exports with descriptive names.
Organize reusable code into modules.

Conclusion

Default exports provide a clean and flexible way to export a single primary value from a JavaScript module. They simplify imports by eliminating the need for curly braces and allowing developers to choose any meaningful name during import.

For automation engineers, default exports are widely used to export page objects, utility classes, configuration objects, API clients, helper functions, and reusable components that form the foundation of scalable automation frameworks.

Mastering default exports is an essential step toward writing modular, reusable, and maintainable JavaScript applications.

Frequently Asked Questions (FAQs)