Skip to content

Latest commit

 

History

History
51 lines (38 loc) · 1.72 KB

import-both-default-and-named-exports.md

File metadata and controls

51 lines (38 loc) · 1.72 KB
Raw
title description publishDate og tags
Import Both Default and Named Exports
How to efficiently import both default and named exports in JavaScript, keeping your code clean and well-organized by mixing these import styles
2021-02-05
code

We can mix and match import styles to keep code tidy and direct.

The code below imports both the default export (as cheesburger) as well as all named exports.

import {
	default as cheeseburger,
	bun,
	cheese,
	patty,
} from './cheeseburger.mjs'

We can tidy it up a smidge by splitting the default export and named export import statements — using a comma.

- import {
-   default as cheeseburger,
-   bun,
-   cheese,
-   patty,
- } from "./cheeseburger.mjs";
+ import cheeseburger, { bun, cheese, patty } from "./cheeseburger.mjs";

This eliminates the need to rename the default on import with as.

What mixed imports are not

The import position of default and named exports cannot be swapped. When mixing the two, it's always default first then named exports.

When I first saw this syntax, I assumed that every comma was like a repeaet — a new opportunity to assign local variables. That's not how it is. One comma, after the default, and before the named.

Go pro

This is part of a course I'm build on modules at lunch.dev.
When live, members get access to this and other courses on React.

<script src="https://cdn.podia.com/embeds.js" async="async"></script>

Join lunch.dev for this course