Modules in Javascript

History

Javascript modules are a pretty recent occurrence, only having been added with ES6 (2015). Before ECMAScript added support for modules, there were custom libraries and implementation of modules, such as the following:

• AMD — implemented by the library require.js.
• CommonJS — Node.js module system.
• UMD — module system suggested as a universal one, compatible with AMD and CommonJS.

With the addition of native Javascript modules, these implementations have gone by the wayside, but they have lead the way and contributed to the way Javascript uses modules.

How to Use Modules

In Javascript, modules are just JS files. They are conventionally named with the .mjs extension instead of .js, which is suggested due to having to distinguish between past JS module systems.

To use modules as scripts in the browser, the HTML code must also include type="module" in the <script> tag. Eg:

<script type="module" src="/module.mjs"></script>

In the module itself, there are two keywords that allow Javascript modules to do modular things:

• export keyword labels variables and functions you want to use in other modules.
• import keyword brings in variables and functions from other modules.

Export

As in everything else in Javascript, there are many ways to export things to be used in other modules.

First, you can export before a declaration of a function or variable or you can export functions or variables after declaration.

Named Export

You can also export default if you only have one class/function/variable in your mjs file. Default exports are only one per file! Export defaults are considered separate and distinct from the other exports shown, which are considered ‘named exports’

Export Default!

Import

Now that we’ve exported stuff, we want to be able to import them. You can do so with the import keyword. You will need different syntax for named and default exports:

Ruby Module Comparison

In Ruby, modules are also convenient way to store and reuse code across different classes and programs. You can integrate them into Ruby classes using the include and extend keywords. include will use the module’s methods as instance methods and extend will use the module’s methods as class methods. Also, you can use modules to ‘namespace’ in Ruby as well, adding to its organizational utility.

Basic module usage in Ruby

As you can see, Ruby’s modules are very different from Javascript modules. In Javascript, everything that is using being exported or imported has to be a module. In Ruby, modules can be included or extended by non-modules. Additionally, modules in Ruby are much more focused around object oriented principles, as they are intended to be similar to inheritance. Modules in Javascript, while they can be used in object oriented ways, do not strictly adhere to that paradigm.

Conclusion

Modules in Javascript can be pretty powerful tools. They are a comparatively late but welcome addition to the Javascript toolbox. As Javascript applications scale up in complexity and become increasingly powerful and widespread, modularity of Javascript files becomes an extremely powerful and useful concept!

Sources

• https://javascript.info/import-export
• https://jakearchibald.com/2017/es-modules-in-browsers/
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules