Creating a Module
Simply put, in JavaScript, a module is an individual file that contains variables, constants, functions, and classes. Modules follow the Vegas theme: “What happens in Vegas stays in Vegas.” Code within a module is executed in strict mode—you don’t need to specify ’use strict’;—so the variables within a module do not accidentally spillover to global scope.
The author of a module has to carefully choose what to export from the file to the outside world. All else is invisible and unreachable directly from the outside. Likewise, for a module to use something that’s not part of it, it first has to import it. Once imported, the reference becomes part of the current module’s scope.
Let’s create a few modules and learn how dependencies are loaded and executed. Here’s a module named right in a file named right.mjs:
| | console.log('executing right module'); |
| | |
| | const message = 'right called'; |
| | |
| | export const right = function() { |
| | console.log(message); |
| | }; |
Unlike languages like Java, there is no module keyword in JavaScript, there is no ceremony to create a module—simply define a file with imports and exports to convey what you want to use and what you want to make available for outside your module, respectively.
The contents of this entire file are part of the right module. The constant message is internal to the module; it isn’t exported and so won’t be visible outside of this module. Using the export keyword, the module exports a variable named right, which refers to a function. This function may be used by the users of the right module through the reference named right. The reference right is the only thing this module makes visible for the outside world to use. At the top of the file, we put an informational print statement to signal when the code within the file is executed. This will help us to clearly see how JavaScript manages loading of files.
Now, let’s create a second module named middle that loads the previous module:
| | import { right } from './right'; |
| | |
| | console.log('executing middle module'); |
| | |
| | export const middle = function() { |
| | console.log('middle called'); |
| | }; |
It’s customary to place all the imports needed for a file at the top—imports are not allowed in nested code; they’re required to be in the top level of a file. The middle module imports the right variable from the right module, prints an informational message that this module’s file is loaded and executed, and exports a variable named middle.
Finally, let’s create a module named left that loads both right and middle modules, like so:
| | import { right } from './right'; |
| | import { middle } from './middle'; |
| | |
| | middle(); |
| | right(); |
The left module loads the two modules, right and middle, and imports the variables right and middle from the right and middle modules, respectively. Finally, the left module calls the two functions referenced by the middle and right variables.
Let’s focus on who loads the right module in this example. First, when the file containing the left module is executed, it appears to load the right module. Then when the left module loads middle, the middle module in turn appears to load the right module on its first line. You may wonder if that means the right module file will be loaded twice. Thankfully, no. JavaScript modules are managed smartly—a module is loaded only once when the first import is seen in the execution control flow. If a module has already been loaded, a request to load it is skipped, but any variables we import are assigned to the proper references. To verify this behavior, run the left module; remember to include the necessary command-line option.
| | node --experimental-modules left.mjs |
The output from the code is
| | (node:78813) ExperimentalWarning: The ESM module loader is experimental. |
| | executing right module |
| | executing middle module |
| | middle called |
| | right called |
The example shows that when working with modules, you may freely import modules without worry about repetitive or redundant executions of any imported code.
We know how to define modules and tie them together. Next, let’s explore the various options to export and import.