Export and Import
Export before declarations
We can label any declaration as exported by placing export before it, be
it a variable, function or a class.
// export an array
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct',
'Nov', 'Dec'];
// export a constant
export const MODULES_BECAME_STANDARD_YEAR = 2015;
// export a class
export class User {
constructor(name) {
this.name = name;
}
}
Export separately
Here we first declare, and then export:
// say.js
function sayHi(user) {
alert(`Hello, ${user}!`);
}
function sayBye(user) {
alert(`Bye, ${user}!`);
}
export {sayHi, sayBye}; // a list of exported variables
Import *
Usually, we put a list of what to import in curly braces import {...}, like
this:
// main.js
import {sayHi, sayBye} from './say.js';
sayHi('John'); // Hello, John!
sayBye('John'); // Bye, John!
But if there’s a lot to import, we can import everything as an object
using import * as <obj>, for instance:
// main.js
import * as say from './say.js';
say.sayHi('John');
say.sayBye('John');
Import under different names
For instance, let’s import sayHi into the local variable hi, and
import sayBye as bye:
// main.js
import {sayHi as hi, sayBye as bye} from './say.js';
hi('John'); // Hello, John!
bye('John'); // Bye, John!
Export “as”
The similar syntax exists for export.
Let’s export functions as hi and bye:
// say.js
export {sayHi as hi, sayBye as bye};
Now hi and bye are official names for outsiders, to be used in imports:
// main.js
import * as say from './say.js';
say.hi('John'); // Hello, John!
say.bye('John'); // Bye, John!
Export default
Modules provide a special export default (“the default export”) syntax to
make the “one thing per module” way look better.
Put export default before the entity to export:
// user.js
export default class User { // just add "default"
constructor(name) {
this.name = name;
}
}
There may be only one export default per file.
…And then import it without curly braces:
// main.js
import User from './user.js'; // not {User}, just User
new User('John');
As there may be at most one default export per file, the exported entity
may have no name.
Another example of default export
In the file greet.js:
// default export
export default function greet(name) {
return `Hello ${name}`;
}
export const age = 23;
Then when importing, you can use:
import random_name from './greet.js';
While performing default export, random_name is imported from greet.js.
Since, random_name is not in greet.js, the default export (greet() in this case)
is exported as random_name. You can directly use the default export without
enclosing curly brackets {}.
Note: A file can contain multiple exports. However, you can only have one
default export in a file.
