As a beginner, technical jargon like modules, packages, and dependencies might feel too overwhelming. With the history of JavaScript and the changes which have sculpted the language into what it’s today, getting familiar with these concepts can help you a lot as a Web Developer. So, what are we waiting for? Let’s jump right into the basics!

What is a Module?

The size of your program grows over time as you add different functionalities to it. It is very important to maintain and structure your code in a way where refactoring becomes easy. You can separate out your code on the basis of its functional context and call it a module.

You can add, remove and move modules without disturbing the other code in your project. Every module has a piece of program which is visible and can be used by other modules and is known as an interface. You can use these interfaces directly into your modules with ease.

What is a Dependency?

When a module requires a piece of the other module, a dependency is formed. A dependency can be termed as the relation between modules. Hence, including your modules in the right order in your HTML is really important if the modules are dependent on each other.

What is a Package?

A package is nothing but a reusable piece of the program. Often, we duplicate our code and use the same copy in other projects. This can save us some time but we might run into several bugs as we can only modify that piece of code in the current project we work on. Imagine, having to go to all projects one by one and correcting that bug manually. This would cause a huge headache. This is where packages come into play. A package contains one or more modules and comes with its own proper documentation and versioning.

A package gets updated when new features are added to it. There are tons of packages available on NPM which we can download and reuse in our code.

Now that we’ve wrapped our head around some basic definitions, let’s learn about the two most common module systems, CommonJS and ECMAScriptModules.

CommonJS

CommonJS is a popular module formatting system that wraps your code in a function known as require.

const bodyParser = require('body-parser')

Here, body-parser is an NPM package.

When we require this module, CommonJS loads the module and returns its interface for usage. The string given to require can either begin with ("./") or without it like in the example above. When it starts with "./" we give it a relative path and export a file present in our local folder structure. With the help of module.exports, we can export the modules. Using CommonJS comes with a big advantage. It maintains a cache of pre-loaded modules and saves time by not loading the same modules multiple times.

ECMAScript Modules

ESModules is the new module system that makes exporting and importing your modules really easy.

In our file, add.js, we return the sum of two numbers and export that function.

function add(a, b) {
  return a + b;
}

export { add };

And then in file, displaySum.js, we import our function add as sum.

import { add as sum } from “./add.js”

console.log(“sum is”, sum(2, 5))

ESM allows you to import your modules with a different name. The advantage here is that ESM loads the modules during compile-time. This helps us remove unused exports and helps us load them asynchronously unlike CommonJS. ESM also uses tree shaking for optimization. The unused code never makes it to the final bundle. It only includes the code which is required. Today, both CommonJS and ESModules are being used in the industry.

As we come towards the end of this article, I hope you now understand what a module is and how different modules can be structured. Module design is really important as you can go back to your code after months and still feel at home because of the proper organization.

That is it for today, people. Thanks for reading! To check my work, you can connect with me on Twitter. Happy Coding!