Default exports in Javascript

Introduction

Default exports let you send one main thing from a file so others can use it easily.

When you want to share a single main function from a file.

When you have one main component in a React file.

When you want to keep your import statements simple.

When you want to rename the import easily without curly braces.

When you want to organize code by exporting one main item per file.

Syntax

Javascript

export default expression;

// or

const something = ...;
export default something;

You can only have one default export per file.

Default exports do not use curly braces when importing.

Examples

This exports a function named greet as the default export.

Javascript

export default function greet() {
  console.log('Hello!');
}

This exports the constant number as the default export.

Javascript

const number = 42;
export default number;

This exports a class Person as the default export.

Javascript

export default class Person {
  constructor(name) {
    this.name = name;
  }
}

Sample Program

Here, add is the default export from mathUtils.js. We import it without curly braces and use it to add numbers.

Javascript

// file: mathUtils.js
export default function add(a, b) {
  return a + b;
}

// file: app.js
import add from './mathUtils.js';

console.log(add(5, 3));

Important Notes

When importing a default export, you can choose any name you like.

Default exports help keep your code organized and easy to use.

Summary

Default exports let you export one main thing from a file.

You import default exports without curly braces.

They make sharing and using code simpler and cleaner.