How to use Modules in JavaScript

This article is my attempt to explain a topic that confuses a lot of students: importing and exporting modules in Nodejs.

This article is my attempt to explain a topic that confuses a lot of students: importing and exporting modules in Nodejs.

First, we will review how it works with CommonJS require and module.exports. Then, we’ll take a look at ES6 Modules.

Most students start with the CommonJS syntax used in NodeJS:

// For NPM packages
const moment = require('moment');
// For internal modules
const toLowerCase = require('./toLowerCase.js');

Then in toLowerCase.js you need to export something:

const convertToLowerCase = (sentence) => {...};

module.exports = convertToLowerCase;

The key here is that whatever value has module.exports will be the value when using require . In this case, the value of module.exports is a function. This means that we could do the following:

const toLowerCase = require('./toLowerCase.js');

toLowerCase('Hello World!');

However, we might want to export more than one thing. For example, let’s say that we have a module with a few useful functions.

const helpers = require('./helpers.js');

Then in our helpers.js :

const convertToLowerCase = (sentence) => {...};

const convertToCamelCase = (sentence) => {...};

module.exports = {
  toCamelCase: convertToCamelCase,
  toLowerCase: convertToLowerCase,
};

In this case, the value of module.exports is an object. This object has two properties: toCamelCase and toLowerCase which have functions as values.

This is how we would use them:

const helpers = require('./helpers.js');

helpers.toCamelCase('Hello world');

Remember: the value of module.exports will be the value of the variable when requiring.

---

Let’s rewrite the previous helper.js file. Remember that the crit part when exporting is the value of module.exports .

module.exports = {};

module.exports.toCamelCase = () => {...};

module.exports.toLowerCase = () => {...};

Both are exactly the same. In both cases module.exports is an object with two properties: toCamelCase and toLowerCase .

The only thing that has changed is when we create the object.

---

Now, let’s take a look at ES6 modules.

We could say that with ES6 modules, you are always exporting and importing an object. ALWAYS.

However, you can choose to only select something specific from that object.

import toLowerCase from './toLowerCase.js';

In this case, we are selecting the value in the property called default in the exported object from toLowerCase.js .

const toLowerCase = (sentence) => {...};

export default toLowerCase;

The previous file is exporting the following object:

{
  default: (sentence) => {...}
}

And when using:

import toLowerCase from ‘./toLowerCase.js’;

toLowerCase has the value in default which is a function. So that we can do:

import toLowerCase from ‘./toLowerCase.js’;

toLowerCase('Hello World!');

The key is that with ES6 modules you are always exporting an object.

---

Let’s take a look at different ways of creating this object:

export const toLowerCase = (sentence) => {...};

This is creating the following in the object:

{
  toLowerCase: (sentence) => {...}
}

We can do it for more variables:

export const toCamelCase = () => {...};

export const toLowerCase = () => {...};

This creates the following object:

{
  toCamelCase: () => {...},
  toLowerCase: () => {...}
}

What if we add a default?

export const toCamelCase = () => {...};
export const toLowerCase = () => {...};

const NUM_HELPERS = 2;

export default NUM_HELPERS;

This creates the following object:

{
  toCamelCase: () => {...},
  toLowerCase: () => {...},
  default: 2
}

This is all the magic there is when exporting; you are creating an object.

---

How can you import that object?

When you want ALL the object that is being exported:

import * as helpers from './helpers.js';

The value of helpers is:

{
  toCamelCase: () => {...},
  toLowerCase: () => {...},
  default: 2
}

Let’s say that you want whatever is in the default property of the object?

import n from './helpers.js';

The value of n is 2.

You want what it’s in toLowerCase

import { toLowerCase } from './helpers.js';

The value of toLowerCase is the function in the toLowerCase property of the object.

NOTE: when importing the default you choose the name of the variable. When importing the value of a specific property, the name has to match.

import { convertToLowerCase } from './helpers.js';

// `convertToLowerCase` will be `undefined`
// the exported object has no property called `convertToLowerCase`

---

On a more advanced note, you can change the name after importing.

Silly way:

import { toLowerCase } from './helpers.js';

const convertToLowerCase = toLowerCase;

The best practice:

import { toLowerCase as convertToLowerCase } from './helpers.js';

I hope this summary is helpful for all the beginners struggling with Javascript modules.

I would have appreciated this summary when I was starting.

For more details, check MDN Documentation on import.