5

If we specify a default export:

export class Foo {}
export default Foo;

then we can omit curly braces during import (as noted in this answer):

import { Foo } from "foo"; // becomes:
import Foo from "foo";

That's fine, but is there any non-stylistic reason to prefer one over the other in particular cases? For example, is there some convention, or is one incompatible with certain tools, or does one have a different meaning?

(Based on this discussion and others, my understanding is that export default might have arisen as a way of handling the export of a single, primary object (like $), which is now handled by import * as foo from "foo". Also, it seems the default import syntax does not enforce consistent naming (import fooAlias from "foo"), while the standard import import { fooAlias } from "foo" would be a compilation error unless the alias was explicit (Foo as fooAlias). Apart from that, I haven't been able to find much information on when I should use one over the other.)

Community
  • 1
  • 1
mk.
  • 11,360
  • 6
  • 40
  • 54
  • Yes, it's supposed to be used when the module defines only a single object (or value in general). Notice that `import * as $ from "jquery";` would not work - you want `$` to be a function not a namespace object. – Bergi Nov 25 '15 at 19:40
  • @Bergi right, but would omitting the default export and importing via `import { $ } from "jquery"` be any different? When would I use one over the other? Is `export default` ever required at all? – mk. Nov 25 '15 at 20:40
  • A default export is usually the most important value, i.e. the one used more frequently. The default export is just another named export with the special name `default`, so `import { default as $ } from 'jquery'` is equivalent to `import $ from 'jquery'`. – Paolo Moretti Nov 25 '15 at 20:52
  • @mk.: Using a named export is just more verbose (`import { jQuery as $ } …`), and you need to remember the name of the export - and repeat it, as it will be the same everywhere. No, default exports are nowhere required, they're just a convienience. – Bergi Nov 25 '15 at 21:26

2 Answers2

2

There's no right or wrong here. I prefer to export one thing so default works for me most of the time. You can also use both too.

I tend to not use default when taking a more pure functional approach or writing a set of static util functions.

So when my module is really just a class, I like to use default. Notice I can still export other things.

export default class Foo {
}

// some util module

export function fooHelper() {
}
export function bazHelper() {
}
pbo
  • 537
  • 4
  • 13
1

exporting default can allow you to rename the file on import so...

foo.js

export default class Foo{
  constructor(){
  }
}

can be import Bar from './foo'; in another file, this could be useful if you're using a library and already have a class Foo defined.

You can also export a default and a non default such that: import Foo, { someVariable, someMethod } from './foo';

glued
  • 2,579
  • 1
  • 25
  • 40
  • This would be the sort of answer I'm looking for ("it allows us to alias"), but aliasing is also available without default exports: just write `import { Foo as fooAlias }...`. It's a bit longer, but that's ultimately just a stylistic difference... – mk. Nov 30 '15 at 21:50