JavaScript Modules – An Introduction

What Are JavaScript Modules?

So, 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 non-specificity actually adds a ton 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. That’s great for Node projects, but what about your front-end projects and applications? This is where modules come in.

Let’s say you have a JavaScript object in one file whose values you want to access in another. With modules, you can easily import the object and use the whole thing or destructure it and pull the specific values out for use. They are nearly identical in functionality to require statements; their syntax is just a bit different.

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 a library. 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 new “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.

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 reflect the change and add “module” as a type. 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’re at least starting to see how useful JavaScript modules are and begin implementing them into your own code when using Node or when a third party library seems like overkill.

To go more in depth about the subject, visit MDN’s page on modules.

rabbler