Difference between export const foo, export default foo and module.exports = foo

Question

I am really confused about:

1. export const foo
2. export default foo
3. module.exports = foo;

I know these are very basic but could someone please differentiate and explain these to me. I really want to understand.

Answer 1

Let take each of these one by one.

export const

 export const foo

This is ES6 export syntax for a named export. You can have many named exports. It says that you want to export the value of the variable foo and you are also declaring that symbol to be const in this module.

You can't actually use export const foo all by itself just like you can use const foo; all by itself. Instead, you would have to assign something to it:

export const foo = 12;

The const applies only to within the module itself. It does not affect what someone can do with the value once they've imported the value from the module on the other end because at the other end (where its imported), it's value is copied into another variable. If that other variable is created with the import statement, then it is automatically const on the import side (you cannot assign to it) no matter what it was declared on the export side.

This could be imported as either of these:

import {foo as localFoo} from 'lib';
import {foo} from 'lib';

The first imports the foo property of the module into a localFoo named variable. The second imports the foo property of the module into a foo named variable.

---

export default

export default foo

This is also ES6 syntax and says that you also want to export the value of the variable foo and you want that to be the default export value so if someone imports just the module and not any properties of the module, this is the variable they will get. You can only have one default export per module.

Internally, the default export is really just a named export with the special name default assigned:

import localVar from 'myLib';

This will get the default export from myLib and assign it's value to a locally declared variable named localVar . The above is a shorthand for this:

import { default as localVar } from 'lib';

So, the default export just allows you to have a shortcut import for one particular export. The ES6 import/export syntax was designed to make the syntax as brief as possible for the default import/export. But, for obvious reasons, there is only one default property per module.

---

module.exports

// inside of myModule
module.exports = foo;

This is node.js syntax for exporting the value of the variable foo and you're exporting it at the top level. When someone uses this module:

let x = require('myModule');
console.log(x);    //  will show the value of `foo` from the previous module

This is not ES6 syntax, but is regular ES5-compatible syntax using the module.exports and require() infrastructure built into node.js.

Answer 2

The export statement is used to export functions, objects or primitives from a given file (or module).

---

Named Exports This is a named export in ES6 javascript

export const foo

which is imported like:

import { foo } from 'path'

---

Default Export This is a default export (This can be imported using any name)

export default foo

which is imported like so:

import bar from 'path'

---

This is commonjs export which is used in nodejs programs.

module.exports = foo;

which is imported like:

var foo = require('path')

---

For more details

Answer 3

export const foo : exports constants (ES6) export default foo : exports object (ES6)

Above statements are ECMA Script 2015 (aka ES6) implementation.

In an normal ES6 JS file one can export any object(variable) or constants. Pls note that you cannot change constant reference, though internal structure can be modified(weird).

In ES6 one can have multiple exports in module(script file). which can be added in calling script as

import {Obj1, Obj2} from module_file

coming to export default, One can have only one export default in module. and while importing when exact names are not defined default is been picked up.

module.exports = foo; is older implementation and it is same as export default. except it is imported with require statement instead of import

for more refer https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export