When should I use curly braces for ES6 import?

In JavaScript, ES Modules make it simple to organize code into separate files, allowing you to import and export values across your app. There are two main ways to handle exports: default exports and named exports. This guide will walk you through the differences between them and show you how to use them effectively.

Table of Contents

1. Understanding Default Exports
2. Understanding Named Exports
3. Combining Default and Named Exports
4. Key Takeaways

Understanding Default Exports

A default export allows a module to export a single value or function. Each module can only have one default export. When importing a default export, you can give it any name you like.

Example:

In A.js:

// A.js
export default "Hello, World!";

In B.js:

// B.js
import Greeting from './A';
import Message from './A';
import Text from './A';

In this case, Greeting, Message, and Text all refer to the same default export in A.js, which is "Hello, World!". The import name is flexible since there’s only one default export to refer to.

Understanding Named Exports

Named exports let you export multiple values from a module. When importing named exports, you must use the exact name of the export, or you can rename it with the as keyword.

Example:

In A.js:

// A.js
export const primaryColor = "#3498db";
export const secondaryColor = "#2ecc71";
export const errorColor = "#e74c3c";

In B.js:

// B.js
import { primaryColor } from './A'; // Works
import { secondaryColor } from './A'; // Works
import { errorColor } from './A'; // Works

import { primary } from './A'; // Doesn't work! The name must match exactly

Here, each named export from A.js must be imported by its precise name. If you try to import { primary } instead of { primaryColor }, it will fail because the name doesn’t match.

Combining Default and Named Exports

It’s common to have both a default export and named exports in the same module. This is useful when you want a primary export alongside a few helper functions or constants.

Example:

In A.js:

// A.js
export default "Welcome!";
export const userGreeting = "Hello, User!";
export const guestGreeting = "Hello, Guest!";

In B.js, you can import everything in one line:

// B.js
import Message, { userGreeting, guestGreeting } from './A';

Or, you can rename them during import to fit the context better:

// B.js
import Message, { userGreeting as UserGreet, guestGreeting as GuestGreet } from './A';

Key Takeaways

• Default Export: A module can have only one default export, and you can name it anything during import.
• Named Export: A module can have multiple named exports, and you must import each by its exact name (or rename it with as).
• Combining Exports: You can import both default and named exports from the same module in a single statement.

Default exports are generally used for the main function or value you expect from a module, while named exports allow you to include additional utilities. This flexibility helps keep your code organized and easy to maintain. Happy coding!