Introduction

Modern JavaScript applications are built using modules, which help organize code into separate files. Modules make applications easier to read, maintain, and scale.

When a module needs to share multiple variables, functions, classes, or objects, JavaScript provides named exports. Named exports allow you to export several values from a single module, making them available for use in other files.

For automation engineers, named exports are commonly used to organize reusable utility functions, page locators, API endpoints, configuration values, helper methods, and test data in frameworks such as Playwright, Selenium, and Cypress.

What are Named Exports?

Named exports allow a JavaScript module to export multiple values, each identified by its own name.

These exported values can later be imported into another file using the import statement and curly braces ({}).

Unlike default exports, a module can have many named exports.

Why Use Named Exports?

Named exports provide several benefits:

Export multiple values from a single module
Improve code organization
Promote code reusability
Reduce duplication
Make modules easier to maintain
Allow selective importing of only the required values

Syntax

Export While Declaring

export const appName = "Inventory";

export function greet() {

    console.log("Welcome");

}

Export Existing Values

const company = "OpenTech";

function welcome() {

    console.log("Hello");

}

export { company, welcome };

Example 1: Export Variables

config.js

export const appName = "Inventory System";

export const version = "1.0";

main.js

import { appName, version } from "./config.js";

console.log(appName);

console.log(version);

Output

Inventory System

1.0

Example 2: Export Functions

math.js

export function add(a, b) {

    return a + b;

}

export function subtract(a, b) {

    return a - b;

}

main.js

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

console.log(add(20, 10));

console.log(subtract(20, 10));

Output

30

10

Example 3: Export a Class

Employee.js

export 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 4: Export an Object

settings.js

export const settings = {

    theme: "Dark",

    language: "English"

};

main.js

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

console.log(settings.theme);

Output

Dark

Example 5: Rename an Export

math.js

function multiply(a, b) {

    return a * b;

}

export { multiply as product };

main.js

import { product } from "./math.js";

console.log(product(5, 8));

Output

Example 6: Rename During Import

math.js

export function divide(a, b) {

    return a / b;

}

main.js

import { divide as calculateDivision } from "./math.js";

console.log(calculateDivision(20, 5));

Output

Real-World Example

Export application configuration.

config.js

export const baseURL = "https://example.com";

export const timeout = 5000;

export const retries = 3;

app.js

import { baseURL, timeout, retries } from "./config.js";

console.log(baseURL);

console.log(timeout);

console.log(retries);

Output

https://example.com

5000

3

Another example:

Export helper functions.

helpers.js

export function capitalize(text) {

    return text.toUpperCase();

}

export function reverse(text) {

    return text.split("").reverse().join("");

}

main.js

import { capitalize, reverse } from "./helpers.js";

console.log(capitalize("javascript"));

console.log(reverse("JavaScript"));

Output

JAVASCRIPT

tpircSavaJ

Automation Testing Example

Named exports are widely used in automation frameworks to organize reusable components.

Playwright Example

Export page locators.

loginLocators.js

export const username = "#username";

export const password = "#password";

export const loginButton = "#login";

Selenium Example

Export browser utilities.

browserUtils.js

export function launchBrowser() {

    console.log("Launching browser");

}

export function closeBrowser() {

    console.log("Closing browser");

}

Cypress Example

Export reusable commands.

commands.js

export function login() {

    console.log("Logging in");

}

export function logout() {

    console.log("Logging out");

}

API Testing Example

Export API endpoints.

api.js

export const loginAPI = "/api/login";

export const usersAPI = "/api/users";

export const productsAPI = "/api/products";

Data-Driven Testing Example

Export test data.

users.js

export const admin = {

    username: "admin",

    password: "admin123"

};

export const guest = {

    username: "guest",

    password: "guest123"

};

Named Exports vs Default Exports

Feature	Named Exports	Default Export
Number allowed	Multiple	One
Import requires curly braces	Yes	No
Imported name	Must match the exported name (unless renamed with `as`)	Can be any valid name
Best used for	Multiple related values	One primary value

Common Mistakes

Forgetting Curly Braces

Incorrect:

import add from "./math.js";

Correct:

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

Importing the Wrong Name

Incorrect:

import { multiply } from "./math.js";

If the module exports product, this import will fail.

Always import the correct exported name or rename it using as.

Forgetting to Export

Incorrect:

const company = "OpenTech";

Without the export keyword, the value cannot be imported into another module.

Best Practices

Use named exports when exporting multiple related values.
Choose meaningful export names.
Keep related functionality in the same module.
Use as to rename exports when necessary.
Import only the values you need.
Avoid exporting unrelated items from the same module.
Organize modules based on responsibility.

Conclusion

Named exports are a powerful feature of JavaScript modules that allow multiple variables, functions, classes, and objects to be shared from a single file. They improve code organization, encourage reuse, and make applications easier to maintain.

For automation engineers, named exports are essential for organizing reusable page locators, utility methods, API endpoints, configuration values, and test data, helping create clean and scalable automation frameworks.

Mastering named exports is an important step toward writing modular and maintainable JavaScript applications.

Frequently Asked Questions (FAQs)

What are named exports?

Named exports allow a JavaScript module to export multiple values, each identified by its own name.

How many named exports can a module have?

A module can have as many named exports as needed.

Do named imports require curly braces?

Yes. Named imports must be enclosed in curly braces.

Can I rename a named export?

Yes. Use the as keyword during export or import to assign a different name.

Can a module have both named exports and a default export?

Yes. A single module can contain one default export along with multiple named exports.

Why are named exports important in automation testing?

Automation engineers use named exports to organize page locators, helper functions, API endpoints, configuration values, and reusable test data into modular, maintainable files.

Key Takeaways

Named exports allow multiple values to be exported from a module.
Import named exports using curly braces.
A module can have many named exports.
Export variables, functions, classes, and objects using named exports.
Use the as keyword to rename exports or imports.
Import only the values required by your application.
Keep modules focused on a single responsibility.
Named exports improve code organization and reusability.
They are widely used in Playwright, Selenium, Cypress, Node.js, and modern JavaScript applications.
Mastering named exports is essential for building scalable JavaScript projects.