# The vanilla JS revealing module pattern

Yesterday, we looked at what a JavaScript library is. Today, we’re going to look at a common JS library pattern: the revealing module pattern.

Let’s dig in!

(*Today’s article is an excerpt from my newly updated Writing JS Libraries course/guide.*)

## A collection of helper functions

To make this guide a bit more tangible, we’re going to build a few different libraries around a set of helper functions that perform basic math.

The `add()`

, `subtract()`

, `multiply()`

, and `divide()`

methods accept two or more numbers as arguments, and add, subtract, multiply, or divide them together, respectively.

```
/**
* Add two or more numbers together
* @param {...Number} nums The numbers to add
*/
function add (...nums) {
// Make sure there are numbers
if (!nums.length) return 0;
// Get the first number and remove it from the array
let total = nums.shift();
// Loop through each number and do math
for (let num of nums) {
total = total + num;
}
// Return the total
return total;
}
// returns 6
let added = add(1, 2, 3);
```

We’ll create a few libraries from these functions, using different programming patterns and techniques.

The *revealing module pattern* is typically used for helper or utility libraries, collections of utility or helper methods (like lodash and underscore).

This pattern lets you scope all of your functions to a specific namespace, which helps prevent naming collisions with other functions. Here’s an example using the `_.eq()`

method from lodash.

```
let wizards = ['Merlin', 'Gandalf'];
let witches = ['Ursula', 'Yennefer'];
// The eq() function is scoped to the _ namespace
let isEqual = _.eq(wizards, witches);
```

## How to create a revealing module pattern

To create a *revealing module pattern*, you assign an *immediately invoked function expression(IIFE)* to a variable.

You place all of your functions inside the IIFE. Let’s call ours `calculator`

.

```
let calculator = (function () {
/**
* Add two or more numbers together
* @param {...Number} nums The numbers to add
*/
function add (...nums) {
// ...
}
/**
* Subtract two or more numbers from each other
* @param {...Number} nums The numbers to subtract
*/
function subtract (...nums) {
// ...
}
/**
* Multiply two or more numbers
* @param {...Number} nums The numbers to multiply
*/
function multiply (...nums) {
// ...
}
/**
* Divide two or more numbers
* @param {...Number} nums The numbers to divide
*/
function divide (...nums) {
// ...
}
})();
```

At the end of your code, you `return`

an object with any of the functions that you want to make publicly available.

For simplicity, you can use the ES6 shorthand notation.

```
let calculator = (function () {
// ...
/**
* Divide two or more numbers
* @param {...Number} nums The numbers to divide
*/
function divide (...nums) {
// ...
}
return {add, subtract, multiply, divide};
})();
```

Now, you can access any of the utility functions by calling them on the `calculator`

namespace.

```
let added = calculator.add(1, 2, 3);
let subtracted = calculator.subtract(10, 1, 1);
let multiplied = calculator.multiply(5, 2, 2);
let divided = calculator.divide(10, 2, 2);
```

## Private variables and functions

You might be wondering, “Why not just use a plain old object?”

```
let calculator = {
add: function (...nums) {},
subtract: function (...nums) {},
multiply: function (...nums) {},
divide: function (...nums) {},
};
```

One advantage of the *revealing module pattern* is that you can include functions and variables that are *private*, and cannot be accessed or used outside of the library.

For example, all four of our `calculator`

functions include a bit of code that checks how many numbers were passed in. Then removes the first one and uses it as the starting `total`

.

```
// Make sure there are numbers
if (!nums.length) return 0;
// Get the first number and remove it from the array
let total = nums.shift();
```

This violates DRY coding principles (*Don’t Repeat Yourself*).

We can abstract that bit of code into a `getTotal()`

helper function.

```
/**
* Get the starting total
* @param {Array} nums The numbers to do math on
* @return {Number} The starting total
*/
function getTotal (nums) {
// Make sure there are numbers
if (!nums.length) return 0;
// Get the first number and remove it from the array
return nums.shift();
}
```

Then, we can use it in our math functions, like this.

```
// Get the first number and remove it from the array
let total = getTotal(nums);
```

The `getTotal()`

function is not a library function. It’s only intended to be used inside other functions in our library.

With a plain object, the `getTotal()`

function would be a public method as part of the library. With a *revealing module pattern*, we can keep it private and for internal use only.

Any functions we don’t explicitly `return`

can only be accessed inside the IIFE itself.

```
// Return public functions
// Because we don't return getTotal(), it can only be used internally
return {add, subtract, multiply, divide};
```

Tomorrow, we’ll look at another JavaScript pattern from my Writing JS Libraries course: the constructor pattern (and object oriented programming).