Es6 modules - of what use is the 'default' export option?

JavaScript
1

Hello.

I understand how the default keyword is used when exporting a value from a file but I don’t understand why or in what circumstances I’d want to use it.

Here’s some code I want to export (it’s a bit silly, but it’s only for test purposes):

const artist = {
  name: 'Dali',
  age: 80
};

const writer = {
  name: 'Orwell',
  age: 90
};

const numberOfPeople = 2;

function artistStatement() {
  return ('I am a Surrealist');
}

function writerStatement() {
 return ('I am a plain-language writer');
}


// Exporting 'artist' as the default value
export { artist as default}

// Exporting the rest of the values
export {writer, numberOfPeople, artistStatement, writerStatement}

and I import the values into another file like this:

// Importing the default value from import-export-module-3-default.js
import artist from './import-export-module-3-default.js'
artist.firstName = "Salvador"
console.log(artist)

// Importing the rest of the values from import-export-module-3-default.js
import {writer, numberOfPeople, artistStatement, writerStatement} from './import-export-module-3-default.js'
console.log(writer)
console.log(numberOfPeople)
console.log(artistStatement)
console.log(writerStatement)

Everything works i.e. all the imported values are logged to the console.

But I still can’t work out why I would want to designate one of the values as default. It would have been just as easy (and less code) to include ‘artist’ in the second import statement:

import {artist, writer, numberOfPeople, artistStatement, writerStatement} ....

I’ve read/watched a number of blog posts and videos and they all tell me how to do it but not why I should do it.

Can anyone tell me?

Chris :slight_smile:

2

Sometimes you’re only exporting a single thing from a module, and sometimes it doesn’t even have a name. A React component is a common example. Take for example, a component connected with react-redux. This is a very common pattern

class TodoList extends React.Component {
  ...
}

export default connect(TodoList, mapProps)

This way we hide the original implementation and only expose the connected implementation. It might still be (and probably is) imported as TodoList, but we’re importing the result of connect() instead. This is just one use case, but the default export can be thought of as a facade for the entire module itself, with the implementation details hidden behind it.

Also, default exports were almost certainly written into the spec with compatibility in mind, specifically with the likes of CommonJS, where you always get a single value back from require(something). Module bundlers like webpack can then treat CommonJS modules like proper ES6 modules by making their module.exports object into a single default export.

1 Like
3

Thanks!

Would there be any use-case examples using just ES6 (No React, no Common.js etc)?

4

@najccforum since artist has been declared and instantiated, you can still export it without using the default keyword and it will still work fine e.g export { artist, writer, numberOfPeople, artistStatement, writerStatement}. However using the export default should still work, I feel those tutorials were trying to tell you that you can’t have more that one export default in a file which is correct. This is because when you export something with the default keyword you can import that thing with any name you like. This becomes difficult to handle when two things are exported with default keyword because it will be hard to tell which one the user is trying to import hence javascript won’t allow two default exports in a file. Hope this make sense?

5

Yes, it does, thank you :slight_smile: