Animations

API

Arrays

Async

Basics

Challenges

Classes

Console

Dates

Debugging

DOM Elements

DOM Methods

DOM Navigation

DOM Properties

Event Listeners

Flow Control

Forms

Functions

Global Functions

JSON

Keywords

Libraries (3rd party)

Math

Modules

Objects

Snippets

String

Types

Widgets

Window Object

JavaScript - Export Default

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';