Imports / Exports
ES6 modules are used to access variables or functions in a module explicitly exported by the modules it imports.
I highly recommend to take a look at MDN resources on import/export (see external resources below), it is both straightforward and complete.
Explanation with sample code
Named exports
Named exports are used to export several values from a module.
Note : You can only name-export first-class citizens that have a name.
| // mathConstants.js
export const pi = 3.14;
export const exp = 2.7;
export const alpha = 0.35;
// -------------
// myFile.js
import { pi, exp } from './mathConstants.js'; // Named import -- destructuring-like syntax
console.log(pi) // 3.14
console.log(exp) // 2.7
// -------------
// mySecondFile.js
import * as constants from './mathConstants.js'; // Inject all exported values into constants variable
console.log(constants.pi) // 3.14
console.log(constants.exp) // 2.7
|
While named imports looks like destructuring, they have a different syntax and are not the same. They don't support default values nor deep destructuring.
Besides, you can do aliases but the syntax is different from the one used in destructuring:
| import { foo as bar } from 'myFile.js'; // foo is imported and injected into a new bar variable
|
Default import / export
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 considered the "main" exported value since it will be the simplest to import. Ref: MDN
| // coolNumber.js
const ultimateNumber = 42;
export default ultimateNumber;
// ------------
// myFile.js
import number from './coolNumber.js';
// Default export, independently from its name, is automatically injected into number variable;
console.log(number) // 42
|
Function exporting:
| // sum.js
export default function sum(x, y) {
return x + y;
}
// -------------
// myFile.js
import sum from './sum.js';
const result = sum(1, 2);
console.log(result) // 3
|
External resources