What Are They?
This is a little bit of a tricky question, because JavaScript modules can be a lot of things. Fortunately, this doesn't mean that they're tricky themselves. This nonspecificity actually adds a lot of valuable functionality to them.
If you've ever used Node.js before, then you almost certainly know what I'm referring to when I mention "require" statements. They're used to transfer packages and files as well as bits of code from pre-existing files across your web applications. Say you have an object in one file whose values you want to access in another file. You can require the object's file and then extract the object by destructuring it. For more information on destructuring, check out my post about it here.
In addition to Node's "require" statements, there are also a number of JS libraries that allow you to do the same thing, such as RequireJS. But don't you wish you could just do this with "vanilla" JS and not have to use Node or bring in a third party library? Well, now you can.
Transferring Code Between Files
With modules now enjoying near universal acceptance among browsers, you can achieve many of the same things with vanilla JS that you could with Node or one of the libraries. Let's take a look at an example:
Exporting Code
export function Person(name, age, email) = {
this.name: name,
this.age: age,
this.email: email
};
export let jason = new Person('Jason', 28, 'jason@test.com');
In the code above, the person constructor and the "jason" object are being exported separately. However, we can use shorthand to export both at the same time, like so:
export { Person, jason };
Essentially, you can export anything with a name. Once the code is exported from a JS file, it needs to be imported into whichever file will use it. Check out the code below:
Importing Code
import { Person, jason } from 'file path';
Obviously, replace "file path" with the file path to the file from which it's being exported.
Making It Work
There's one last thing that needs to be done before the modules can be used. The file type of the JS files needs to be changed. The file extension must be changed from .js to .mjs (modular JS). So, let's say the files using modules were index.js and person.js. Those now need to be index.mjs and person.mjs. The script tags must also change. The new script tags should look like:
Module Script Tags
script type="module" src="index.mjs" /script
script type="module" src="person.mjs" /script
Hopefully now, you can see how useful JS modules are and begin implementing them into your own code when using Node or a third party library seems like overkill.
To go more in depth about the subject, visit MDN's page on modules.