JavaScript Modules
About JavaScript modules
In JavaScript, modules are reusable pieces of code that can be exported from one JavaScript file and imported for use in another JavaScript file.
They help organize and structure JavaScript codebases, making them more maintainable and scalable.
The export keyword is used to make variables, functions, or classes available for use in other modules.
The import keyword is used to import variables, functions, or classes from other modules.
We suggest that you try this in VS Code for a better performance and understanding.
Creating and Exporting a JavaScript Module
To create a JavaScript module, first you need to create a JavaScript file where variables, functions, and classes can be defined and exported. (Please note that the JavaScript file named math.js will be used as a module throughout this tutorial.)
There are two types of exports: Named Exports and Default Exports.
1. Named Exports
The export keyword is used before variables, functions, or classes to export them from the module (math.js) file using their names.
Example of Named Exports
Explanation of the Code
-
export const pi = 3.14: Theexportkeyword is used before variableconst pito export thepivariable and use it in another JavaScript file importing by its exact name (name is case-sensitive and an alias can be used with its exact name). -
export function add(a, b){return a + b;}: Theexportkeyword is used before functionfunction addto export theaddfunction. This allows the add function to be imported and used it in another JavaScript file by its exact name. (Named exports are imported using exact names and names are placed within curly braces '{}' after import keyword.)
2. Default Export
Each module can have only one default export.
The export default keywords are used before a variable or a function or a class name to export it from the module (math.js here) file.
Named and default exports can be defined in a single module.
Example of Default Export
Explanation of the Code
-
export default function multiply(a, b){return a * b;}: Theexport defaultkeywords are used before functionfunction multiplyto export themultiplyfunction as default export. This allows the 'multiply' function to be imported and used in another JavaScript file by its name or any name. (Default export can be imported by any name.)
Consolidated/Group Export
In this approach, you do not need to use export keyword for each variable and function to be exported. You can export them at a time in a group. (e. g. export {multiply as default, pi, add})
It's useful when you have several variables and functions defined, and you want to export them all together for better organization.
You can also add or remove items from the exported list easily.
Example of Group Export
Explanation of the Code
-
export {multiply as default, pi, add, subtract, divide};: This exports variable and functions in a group. You can specify which variables and functions will be exported. Please remember that you need to specify the default export. -
Default and named exports can be exported separately (e.g.
export {multiply as default}andexport {pi, add, subtract, divide}).
Importing & Using a JavaScript Module
- The
importkeyword is used to import exported variable, functions and classes from a module. - The
importkeyword is followed by the names of exports (exported variable, functions and classes) and thefromkeyword. - The
fromkeyword is followed by the module file address from which variable, functions and classes are exported.
We will use importmath.js file to import exported variable, functions and classes from the math.js file.
1. Importing Named Exports
The named exports are placed inside curly braces '{}' as demonstrated in the following example:
Example of Importing Named Exports
Explanation of the Code
-
import {pi, add, subtract, divide} from "/math.js": Theimportkeyword is used to import thepi, add, subtract, dividevariable and functions from the math.js file and use it in importmath.js file by its exact name. -
{pi, add, subtract, divide}: Named exports (pi, add, subtract, divide) are placed inside the curly braces separated by comma. -
from "/math.js": Thefromis a keyword and"/math.js"defines the file address from which variable and functions are exported.
2. Importing Default Export
The default export can be imported by using its name or any other name. Default export is not placed inside curly braces '{}'.
Example of Importing Default Export
Explanation of the Code
-
import multiply from "/math.js": Theimportkeyword is used to import themultiplyfunction from the math.js file and use it in importmath.js file by its name. -
multiply: It is a default export and it is not placed inside the curly braces. -
from "/math.js: Thefromis a keyword and"/math.js"defines the file address.
3. Importing Both Named and Default Exports
Both Named and Default Exports can be imported in a JavaScript file as demonstrated in the following example:
Example of Importing Both Named and Default Exports
Explanation of the Code
-
multiply, {pi, add, subtract, divide}:multiplyis the default export and{pi, add, subtract, divide}are named exports separated by comma.
4. Importing All Named Exports Using Asterisk (*)
All named exports can be imported in a JavaScript file using asterisk (*) as demonstrated in the following example:
Example of Importing Named Exports Using Asterisk (*)
Explanation of the Code
-
import multiply, * as math from "/math.js": This line of code imports default export as well as all named exports using asterisk (*). -
* as math: This assigns all the imported named exports to a single object namedmath. -
math.add(4, 6): Please note that themathobject is used to use the imported named exports.
Modules can be imported in an HTML script tag. In such case, script type should be declared as "module". (e. g. <script type="module">)
HTML Editor For Live Practice
Practice the above JavaScript code in the following HTML Editor. Import variable and functions from math.js module and use them in the following HTML code editor and click Render Code button to check the output. The output will be displayed in HTML Code Output section.
HTML Editor