In JavaScript, the reserved words export and import are the foundation of the ESM module system.
We have already seen that there are different types of modules in JavaScript. The standard solution is ESM modules, which were introduced in 2015.
Whenever possible, we should use ESM modules over other alternatives, as they are the native and standardized way.
So in this article, we will take a detailed look at how to use ESM modules, which is done using the reserved words export and import.
Exporting elements with export
First, a module must export the elements we want using the export keyword.
The export statement makes certain parts of the code (functions, variables, objects, etc.) accessible from other modules.
Export a function
We can export a function by simply placing export before its definition.
// file functions.js
export function sum(a, b) {
return a + b;
}In this example, the function sum is marked for export and will be available to be imported in other files.
Export a variable
In addition to functions, we can also export variables by placing export before their declaration.
// file variables.js
export const PI = 3.1416;Here, the constant PI is marked as exportable and can be imported in other files.
Export everything at the end of the file ⭐
However, the most common way to export elements is to do it at the end of the file using the export keyword.
// file functions.js
function sum(a, b) {
return a + b;
}
function subtract(a, b) {
return a - b;
}
export { sum, subtract };In this case, we export the functions sum and subtract at the end of the file.
Importing elements with import
Once we have exported functions or variables in a file, we can import them into another file using the import keyword.
The import statement is used to bring in functions, objects, variables, or any other exported element from another module, allowing them to be used in the importing module.
Import elements
Importing specific elements allows us to select exactly what we need from another module.
// file main.js
import { sum } from './functions.js';
import { PI } from './variables.js';
console.log(sum(5, 3)); // Result: 8
console.log(PI); // Result: 3.1416In this example, we import the function sum from the file functions.js and the constant PI from the file variables.js.
Rename imported elements
If we need to avoid name conflicts or improve readability, we can also rename the elements we import.
// file main.js
import { sum as addNumbers } from './functions.js';
import { PI as numberPi } from './variables.js';
console.log(addNumbers(5, 3)); // Result: 8
console.log(numberPi); // Result: 3.1416Import everything with *
When a module exports many elements, we can import them all as a single object using * as name.
// file main.js
import * as functions from './functions.js';
import * as variables from './variables.js';
console.log(functions.sum(5, 3)); // Result: 8
console.log(variables.PI); // Result: 3.1416In this case, functions and variables will be objects that contain all the exports from the corresponding file.
Default modules
Default modules are a special feature of ESM modules that allow exporting a single default value from a file.
Unlike normal exports, default values do not need to be explicitly named.
There can only be one default export per module.
Export default value
We can use export default to define a default value that will be the only export from the module.
// file default.js
const message = 'Hello World';
export default message;Import default value
When importing a default value, there is no need to use curly braces {}. We can name the imported element as we wish.
// file main.js
import message from './default.js';
console.log(message); // Result: 'Hello World'Re-exporting elements
If necessary, you can also re-export elements from other modules. For example, it is useful for consolidating exports into a single module.
// index.js
export { fetchData, url } from './utils.js';With this technique, other modules can import fetchData and url directly from index.js, simplifying dependencies.