What You Need to Know About Named Exports in JavaScript

In my journey as a JavaScript developer, I have come across numerous concepts that have shaped my understanding of the language. One such concept is named exports. Named exports are a fundamental part of JavaScript modules and they provide a way to export multiple values from a module. They allow us to export as many named exports as we want from a file. While both named and default exports are useful, they serve different purposes. Named exports are useful when we want to export multiple things from a file, while default exports are useful when we want to export a single value.

However, it's important to note that using both named and default exports in the same file can be considered an anti-pattern. It can lead to confusion and make the code harder to understand. It's generally recommended to use either named exports or default exports in a single file, but not both.

‍

Understanding the Syntax

The syntax of named exports is straightforward. We use the export keyword followed by the const, let, var, function, or class keywords. This allows us to export multiple values from a file.

1     // Example of named exports
2    export const name = 'John';
3    export const age = 30;
4    export function greet() {
5      console.log('Hello, ' + name);
6    }
7     

In the above example, we have three named exports: name, age, and greet. Each of these can be imported in other files using the import statement with the same name enclosed in curly braces .

1     // Importing named exports
2    import { name, age, greet } from './module.js';
3    console.log(name); // John
4    console.log(age); // 30
5    greet(); // Hello, John
6     

It's worth noting that the names of the imported values must match the names of the exported values. This is because named exports are imported and exported by their names. If you want to import a named export under a different name, you can use the as keyword to rename it.

1     // Renaming named exports during import
2    import { name as firstName, age, greet } from './module.js';
3    console.log(firstName); // John
4    console.log(age); // 30
5    greet(); // Hello, John
6     

In the above example, we're importing the name named export as firstName. This allows us to use a different name for the imported value in the current file.

Another thing to note is that you can export multiple values at once by enclosing them in curly braces after the export keyword.

1     // Exporting multiple values at once
2    const name = 'John';
3    const age = 30;
4    function greet() {
5      console.log('Hello, ' + name);
6    }
7    
8    export { name, age, greet };
9     

In the above example, we're exporting the name, age, and greet values at the same time. This is equivalent to exporting them one by one as shown in the previous examples.

‍

Named Exports vs Default Exports

While both named exports and default exports are integral parts of JavaScript modules, understanding their differences is crucial for effective code organization and clarity.

‍

Key Differences

The key difference between named exports and default exports lies in their usage. Named exports are useful when a module exports multiple things, like objects or functions. On the other hand, default exports are used when a module exports a single thing, like a function or a class.

1     // Named exports
2    export const name = 'John';
3    export const age = 30;
4    export function greet() {
5      console.log('Hello, ' + name);
6    }
7    
8    // Default export
9    export default function greet() {
10      console.log('Hello, World!');
11    }
12     

Another key difference is in their import syntax. Named exports must be imported using the exact name they were exported with, enclosed in curly braces . Default exports, however, can be imported with any name.

1     // Importing named exports
2    import { name, age, greet } from './module.js';
3    
4    // Importing default export
5    import greetWorld from './module.js';
6     

‍

When to Use Which?

The choice between named exports and default exports often depends on the specific use case. If a module is designed to export multiple values, named exports are the way to go. They allow importing code to pick and choose which values to import.

On the other hand, if a module exports a single value, like a React component or a utility function, a default export makes sense. It simplifies the import statement and makes the code more readable.

However, it's important to note that using both named and default exports in the same module can lead to confusion and is generally considered an anti-pattern. It's best to stick to one type of export per module to maintain clarity and consistency.

‍

Working with Named Exports in React

Named exports play a significant role in React development. They allow us to export multiple components, hooks, and contexts from a single file, providing a flexible way to organize our code.

‍

Exporting Components

In React, we often have multiple components in a single file. Named exports allow us to export these components independently. This is particularly useful when we have a main component and several sub-components in the same file.

1     // Named exports of React components
2    export const Header = () => {
3      return <h1>Welcome to My App!</h1>;
4    };
5    
6    export const Footer = () => {
7      return <footer>© 2022 My App</footer>;
8    };
9     

In the above example, we're exporting two components, Header and Footer, using named exports. We can import these components into other files using their respective names.

‍

Exporting Hooks and Contexts

Named exports are not only limited to components. We can also export custom hooks, contexts, and other JavaScript values from a file.

1     // Named exports of React hooks and contexts
2    import { createContext, useState } from 'react';
3    
4    export const UserContext = createContext();
5    
6    export function useUser() {
7      const [user, setUser] = useState(null);
8      // Other user-related logic...
9      return { user, setUser };
10    }
11     

In the above example, we're exporting a context UserContext and a custom hook useUser using named exports. We can import these into other files using their respective names.

‍

Re-exporting Named Exports

Re-exporting is a powerful feature in JavaScript modules that allows us to export again something that we have imported from another module. This can be particularly useful when we want to create a central module that exports values from various files.

‍

The Concept of Re-exporting

Re-exporting is done using the export keyword followed by the import statement. This allows us to import a value from one module and immediately export it from the current module.

1     // Re-exporting named exports
2    export { name, age, greet } from './module.js';
3     

In the above example, we're importing the name, age, and greet named exports from module.js and immediately re-exporting them from the current file.

‍

Real-world Scenarios

Re-exporting can be especially useful in real-world scenarios where we want to create a central module that exports values from various files. This can help in organizing our code and making it easier to import values from a single module instead of multiple modules.

1     // Re-exporting named exports from various files
2    export { Header, Footer } from './components.js';
3    export { UserContext, useUser } from './hooks.js';
4    export { name, age, greet } from './utils.js';
5     

In the above example, we're creating a central module that re-exports named exports from various files. This makes it easier to import these values in other files, as we only need to import them from this central module.

‍

Importing Named Exports

Importing named exports is a straightforward process in JavaScript. It involves using the import statement followed by the names of the exports enclosed in curly braces .

‍

Importing Single Named Exports

To import a single named export, we simply include the name of the export in the import statement.

1     // Importing a single named export
2    import { greet } from './module.js';
3    greet(); // Hello, John
4     

In the above example, we're importing the greet named export from module.js and calling it in the current file.

‍

Importing Multiple Named Exports

To import multiple named exports, we include all the names of the exports in the import statement, separated by commas.

1     // Importing multiple named exports
2    import { name, age, greet } from './module.js';
3    console.log(name); // John
4    console.log(age); // 30
5    greet(); // Hello, John
6     

In the above example, we're importing the name, age, and greet named exports from module.js and using them in the current file.

It's important to note that the names of the imported values must match the names of the exported values. This is because named exports are imported and exported by their names. If you want to import a named export under a different name, you can use the as keyword to rename it.

1     // Renaming named exports during import
2    import { name as firstName, age, greet } from './module.js';
3    console.log(firstName); // John
4    console.log(age); // 30
5    greet(); // Hello, John
6     

In the above example, we're importing the name named export as firstName. This allows us to use a different name for the imported value in the current file.

‍

Transform Your JavaScript Modules With Named Exports!

In conclusion, named exports are a fundamental part of JavaScript modules, providing a flexible way to export multiple values from a module. They play a significant role in code organization, allowing us to export and import multiple values, including functions, objects, components, hooks, and contexts. Understanding the syntax, usage, and best practices of named exports is crucial for any JavaScript developer. However, it's important to remember that while named exports are powerful, they should be used judiciously. Mixing named and default exports in the same module can lead to confusion and is generally considered an anti-pattern. Therefore, it's recommended to stick to one type of export per module to maintain clarity and consistency in your code.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.