How to add a JavaScript file to another JavaScript file
Overview
We can include a JavaScript file in another JavaScript file using the import and export statements.
Starting from ES6, JavaScript introduced the import and export statements to use variables, classes, functions, and so on, across multiple JavaScript files.
Let's see an example to understand how to use the import and export statements, in the code snippet below.
Example
index.js
example.js
// creating a functionconst greet = () => {console.log("Hello World!")}// exporting the greet() function// to be used in other JS filesexport {greet}
Explanation
In the file example.js,
- Line 2: We create a function
greet()that printsHello World!on the console. - Lines 8–10: We export the function
greet()so that it can be used in other JavaScript files.
In the file index.js,
- Line 2: We import the file
example.js.
- Line 5: We invoke the function
greet()defined in the fileexample.js.
Output
The export statement will export the function greet(), to be used in other JavaScript files and the import statement will include the code exported (in this case, the function greet()) from the file example.js.
Thus, when we run the code above, we see Hello World! on the console.