Why and when to use default export over named exports in es6 Modules?

There aren't any definitive rules, but there are some conventions that people use to make it easier to structure or share code.

When there is only one export in the entire file, there is no reason to make it named. Also, when your module has one main purpose, it could make sense to make that your default export. In those cases you can extra named exports

In react for example, React is the default export, since that is often the only part that you need. You don't always Component, so that's a named export that you can import when needed.

import React, {Component} from 'react';

In the other cases where one module has multiple equal (or mostly equal) exports, it's better to use named exports

import { blue, red, green } from 'colors';

Some differences that might make you choose one over the other:

Named Exports

• Can export multiple values
• MUST use the exported name when importing

Default Exports

• Export a single value
• Can use any name when importing

This article does a nice job of explaining when it would be a good idea to use one over the other.

1st Method:-

export foo; //so that this can be used in other file


import {foo} from 'abc'; //importing data/fun from module

2nd Method:-

export default foo;  //used in one file


import foo from 'blah'; //importing data/fun from module

3rd Method:-

export = foo;


import * as foo from 'blah';

The above methods roughly compile to the following syntax below:-

//all export methods

exports.foo = foo; //1st method
exports['default'] = foo; //2nd method
module.exports = foo; //3rd method

//all import methods

var foo = require('abc').foo; //1st method
var foo = require('abc')['default']; //2nd method
var foo = require('abc'); //3rd method

For more information, visit to Default keyword explaination

Note:- There can be only one export default in one file.

So whenever we are exporting only 1 function, then it's better to use default keyword while exporting

With named exports, one can have multiple named exports per file. Then import the specific exports they want surrounded in braces. The name of imported module has to be the same as the name of the exported module.

// imports
// ex. importing a single named export
import { MyComponent } from "./MyComponent";


// ex. importing multiple named exports
import { MyComponent, MyComponent2 } from "./MyComponent";


// ex. giving a named import a different name by using "as":
import { MyComponent2 as MyNewComponent } from "./MyComponent";


// exports from ./MyComponent.js file
export const MyComponent = () => {}
export const MyComponent2 = () => {}

You can also alias named imports, assign a new name to a named export as you import it, allowing you to resolve naming collisions, or give the export a more informative name.

import MyComponent as MainComponent from "./MyComponent";

You can also Import all the named exports onto an object:

import * as MainComponents from "./MyComponent";
// use MainComponents.MyComponent and MainComponents.MyComponent2 here

One can have only one default export per file. When we import we have to specify a name and import like:

// import


import MyDefaultComponent from "./MyDefaultExport";


// export


const MyComponent = () => {}


export default MyComponent;

The naming of import is completely independent in default export and we can use any name we like.

From MDN: Named exports are useful to export several values. During the import, one will be able to use the same name to refer to the corresponding value. Concerning the default export, there is only a single default export per module. A default export can be a function, a class, an object or anything else. This value is to be considered as the “main” exported value since it will be the simplest to import.

It's somewhat a matter of opinion, but there are some objective aspects to it:

• You can have only one default export in a module, whereas you can have as many named exports as you like.

• If you provide a default export, the programmer using it has to come up with a name for it. This can lead to inconsistency in a codebase, where Mary does

  import example from "./example";
  

  ...but Joe does

  import ex from "./example";
  

  In contrast, with a named export, the programmer doesn't have to think about what to call it unless there's a conflict with another identifier in their module. It's just

  import { example } from "./example";
  

  If there's a conflict where you want the example export from two different modules, you can use as to rename:

  import { example as widgetExample } from "./widget/example";
  import { example as gadgetExample } from "./gadget/example";
  

• With a named export, the person importing it has to specify the name of what they're importing, which means they get a nice early error if they try to import something that doesn't exist.

• If you consistently only use named exports, programmers importing from modules in the project don't have to think about whether what they want is the default or a named export.

EASIEST DEFINITION TO CLEAR CONFUSIONS

Let us understand the export methods, first, so that we can analyze ourselves when to use what, or why do we do what we do.

Named exports: One or more exports per module. When there are more than one exports in a module, each named export must be restructured while importing. Since there could be either export in the same module and the compiler will not know which one is required unless we mention it.

//Named export , exporting:


export const xyz = () =>{
}


// while importing this
import {xyx} from 'path'
or
const {xyz} = require(path)

The braces are just restructuring the export object.

On the other hand , default exports are only one export per module , so they are pretty plain.

//exporting default


const xyz =() >{
};


export default xyz


//Importing
import xyz from 'path'


or


const xyz = require(path)

I hope this was pretty simple to understand, and by now you can understand why you import React modules within braces...

You should almost always favour named exports, default exports have many downsides

Problems with default exports:

1. Difficult to refactor or ensure consistency since they can be named anything in the codebase other than what its actually called
2. Difficult to analyze by automated tools or provide code intellisense and autocompletion
3. They break tree shaking as instead of importing the single function you want to use you're forcing webpack to import the entire file with whatever other dead code it has leading to bigger bundle sizes
4. You can't export more than a single export per file
5. You lose faster/direct access to imports

checkout these articles for a more detailed explanation:

https://blog.neufund.org/why-we-have-banned-default-exports-and-you-should-do-the-same-d51fdc2cf2ad

https://humanwhocodes.com/blog/2019/01/stop-using-default-exports-javascript-module/

https://rajeshnaroth.medium.com/avoid-es6-default-exports-a24142978a7a

Named Export: (export)

With named exports, one can have multiple named exports per file. Then import the specific exports they want surrounded in braces. The name of imported module has to be the same as the name of the exported module.

// imports

// ex. importing a single named export

import { MyComponent } from "./MyComponent";

// ex. importing multiple named exports

import { MyComponent, MyComponent2 } from "./MyComponent";

// ex. giving a named import a different name by using "as":

import { MyComponent2 as MyNewComponent } from "./MyComponent";

// exports from ./MyComponent.js file

export const MyComponent = () => {} export const MyComponent2 = () => {}

Import all the named exports onto an object: // use MainComponents.MyComponent and MainComponents.MyComponent2 here

import * as MainComponents from "./MyComponent";

Default Export: (export default)

One can have only one default export per file. When we import we have to specify a name and import like:

// import

import MyDefaultComponent from "./MyDefaultExport";

// export

const MyComponent = () => {} export default MyComponent;

Note: The naming of import is completely independent in default export and we can use any name we like.

Here's a great answer that explains default and named imports in ES6