Animations
API
Arrays
Async
Basics
Challenges
Classes
Console
Dates
Debugging
DOM Elements
DOM Methods
DOM Properties
Event Listeners
Flow Control
Forms
Functions
Global Functions
JSON
Keywords
Libraries (3rd party)
Math
Modules
Objects
Snippets
String
Types
Widgets
Window Object
Where as with Named Exports, you can export certain members of a module,
export default
allows you to export a "default" scope of code without having to name it explicitly
in your import. With the right structure, you can also use export default
and export a whole object
with many functions as properties.
It's basically saying "export this thing as the default and the import doesn't need to know the real name".
// in theory, HelloWorld1 is the one that doesn't have to be explicitly named with the import.
const HelloWorld1 = () => { console.log(`Hello World 1`); };
const HelloWorld2 = () => { console.log(`Hello World 2`); };
const HelloWorld3 = () => { console.log(`Hello World 3`); };
export { HelloWorld1 as default, HelloWorld2, HelloWorld3 };
You can also use export default like so:
const HelloWorld1 = () => { console.log(`Hello World 1`); };
export { HelloWorld1 as default};
The import might look like:
import hw1 from 'GreetingsDefaultExport.js';
import {HelloWorld2, HelloWorld3} from './GreetingsDefaultExport.js';