Check out the WordPress site for the same content in a new experience!
All about modules in Javascript
Modules are a way to share data between different files in Javascript.
There are two main methods for handling modules in Javascript - Common JS Modules & ES6 Modules.
Common JS Modules
Common JS modules work something like this. Suppose you have two files named foo.js (which will be exporting a function) and bar.js (which will be using the exported function). So, they will look something like this -
Here is the foo.js -
<pre class="wp-block-code"><code>const test = () => { console.log("This is an \n exported function");}module.exports = test;</code></pre>And here is the bar.js -
<pre class="wp-block-code"><code>const test = require('./foo.js');test();</code></pre>Now if you run the bar.js using node bar.js, you will see the console log statement being executed written in foo.js.
Remember that Modules are specific to Node.JS and don't work in browser. If you are seeing modules being used in browser code remember that there must be some library being used.
The next thing which might come to your mind is how to export multiple data from the file. So, for that you can just assign the exports as an object and put multiple elements in it, all of which will be exported. For example -
<pre class="wp-block-code"><code>module.exports = { firstFunction, secondFunction, someVariable,};</code></pre>And now while importing, you can do something like this -
<pre class="wp-block-code"><code>const {firstFunction, secondFunction, someVariable} = require('./foo.js');</code></pre>One another interesting thing about Common JS module is that while exporting you can directly assing a variable named exports the exported values instead of assigning module's exports property. For example -
<pre class="wp-block-code"><code>exports = { firstFunction, secondFunction, someVariable,};</code></pre>ES6 Modules
ES6 modules are used for exactly the same purpose as Common JS modules, just the syntax is different. For example foo.js (i.e the file exporting data) will be something like this -
<pre class="wp-block-code"><code>const test = () => { console.log("This is an exported function");}export default test;</code></pre>And the bar.js (i.e the file importing data) will be something like this -
<pre class="wp-block-code"><code>import test from "./foo.js";test();</code></pre>And now you can use your bar.js in your HTML code as -
<pre class="wp-block-code"><code><script scr="./bar.js" type="module"></script></code></pre>And also if you are wondering how to export multiple data, you can do something like this -
<pre class="wp-block-code"><code>export const firstFunction = () => { console.log("First function");}export const secondFunction = () => { console.log("Second function");}export const someVariable = "Some Variable";</code></pre>And then import it in the same destructured way -
<pre class="wp-block-code"><code>import {firstFunction, secondFunction, someVariable} from "./foo.js";</code></pre>One important differnce between Common JS module and ES6 Modules is that you can use the require statement conditionally, i.e within if statements, because require is ultimately just a function call. But you can't do the same with import statements.
Hopefully with this you have got a good idea of modules and all the differences between Common JS modules and ES6 Modules.
Thank you. 👋