DEV Community

Shadab Ali
Shadab Ali

Posted on

7

Default vs Named exports

There are two primary ways to export values with JavaScript: default exports and named exports. But you can use one or both of them in the same file. A file can have not more than one default export, but it can have as many named exports as you like

Export Statements:
export default function Button() {} // default export
export function Button() {} // named export

Import Statements:
import Button from './button.js'; // default export
import { Button } from './button.js'; // Named export

When you write a default import, you can put any name you want after import.
For example, you could write
import Banana from './button.js'
and it would still provide you with the same default export.
In contrast, with named imports, the name has to match on both sides. That’s why they are called named imports!

Top comments (4)

Collapse
 
thi3rry profile image
Thierry Poinot • Edited

No, you can create alias with this syntax :

import { Button as RedButton } from './Button.js';
new RedButton();
Enter fullscreen mode Exit fullscreen mode

It is called named export to allow exporting multiple things from one package.

Collapse
 
rksingh620 profile image
Rohit Kumar Singh

Setting alias is different thing. The import must be same name as exported for named exports.
After importing it you can set it's alias to whatever you like.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
ronaldosc profile image
Ronaldo

This notation is a deconstructing assignment one, and for alias you can set like this:

import { Module : mod } from './someModule.js'
mod.someProperty( )
Enter fullscreen mode Exit fullscreen mode

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay