ECMAScript 2015 (ES 6) is the sixth version of the ECMAScript language specification. ES6 was released in 2015 and introduced several features which have made significant improvements to the JavaScript language.
The ES6 Modules are one of the many features introduced by the ES6 specification that have made JavaScript easier to use.
ES6 modules provide the ability to split JavaScript code into multiple files(modules), with each file having its own sets of variables, functions, classes and other functionality. These modules can then be imported and exported into other parts of your codebase as required. ES6 modules make it easier for developers to share and reuse codes in general.
The Import and Export keywords are essential to using ES6 modules. To make your code available for use in other modules, you first have to export it.
The Export Keyword
It is safe to say that every JavaScript file written is a module. This is because the variables and functions defined in each JavaScript file are private to the file and cannot be accessed in any other file until they are exported.
There are two types of exports in ES6. These are:
Named exports
Default exports
Named Exports
Named exports allow you to export specific functions or values from a module. You have to use the 'export' keyword, followed by the name of the value or function you want to export.
Note that there can be multiple named exports in a single file.
Here's an example:
//exports.js
//exporting a value
export const state = "Lagos";
//exporting a function
export function multiply(a, b) {
return a * b;
}
Exporting multiple values
To do this, you should write the export statement on a separate line instead of writing it in front of your variable or function declaration. You then have to specify the values you want to export in curly brackets.
//multipleexports.js
const state = "Lagos";
const country = "Nigeria";
export { state, country }
Default Exports
Default exports are used to export a single value from a module. Note that there can only be one default export in a single JavaScript file.
To define a default export, you have to use the "export default" syntax, followed by the value you want to export.
Example:
//defaultexports.js
const myFunction() {
//input function code
}
export default myFunction;
//unlike the named export, the "export default" keyword cannot be defined before a variable declaration like this:
export default const plant = "Hibiscus"; //This will not work because it's an error
The Import Keyword
As the name implies, the "import" keyword is used to import modules in JavaScript. Importing allows you to bring functionality from one module into another module.
After exporting a value from its initial file, you have to import it into your new file to be able to access it.
To successfully import your module, you use the "import" keyword followed by the name of the module you want to import.
For our example, let's import the modules in our multipleexports.js file above:
import { state, country } from './multipleexports.js';
Conclusion
Thank you for reading up till this point.
I hope this post has helped simplify the concepts of "ES6 modules", and the "import" and "export" for you.
Feel free to leave any questions and comments below!