The javascript module pattern
Tags: javascript, tutorial, beginners, webdev
Published: 2022-03-09 20:14:28

**Please do not confuse this with modules that you import or export!**

Key background knowledge : 

- use of _ for private methods/properties
- IIFE
- factory functions (see part1)

## What is the javascript module pattern? 

---


The module is very similar to a factory function where instead you make lots of objects, the module is wrapped in an [IIFE](https://flaviocopes.com/javascript-iife/) and is given closure.

So how do we create a module?

```javascript
(function() {
    // Any code here
  // All function and variables are scoped to this function
})();

```
This function is immediately invoked(called)

---


Lets create a usuable module. 

```javascript
const jsModule = (function() {
      const publicMethod = () =>  console.log('Hello World!');
    return {publicMethod}
})();

jsModule.publicMethod(); // outputs 'Hello World'
```
Even though it is immediately invoked we can still access its methods (via the return)

---


However a real good use of these IIFE type modules is make methods private.

```javascript
const myModule = (function() {
  const _privateProperty = 'Hello World';

  const _privateMethod =() => console.log(_privateProperty);
  
  const publicMethod = () =>_privateMethod()
    return {publicMethod}
  
})();

myModule.publicMethod(); // outputs 'Hello World'
console.log(myModule._privateProperty); // is undefined protected by the module closure
myModule._privateMethod(); // is TypeError protected by the module closure
```

Even though the public method uses private methods we can any methods we return. 

However see what happens when we try to access private properties and methods! 

> 
This gives us a way to create private methods and state!

---


## The revealing module pattern

This is a popular way to use modules to organise code and to reveal properties and methods we want to make public

Example of the revealing module pattern:

```javascript
const myModule = (function() {
  const _privateProperty = 'Hello World, I am a very private property';
  const publicProperty = 'I am a public property';

  const _privateMethod =() =>  console.log(_privateProperty)   
  
  const publicMethod = ()=> _privateMethod()
  return {publicMethod,publicProperty};
})();

myModule.publicMethod(); // 'Hello World....'
console.log(myModule.publicProperty); // 'I am a public property'
console.log(myModule._privateProperty); // is undefined protected by the module closure
myModule._privateMethod(); // is TypeError protected by the module closure
```
You can have as many private/public methods you want. 




### So when do we use these modules?

Well if you were making a game, you would use the module pattern to load up anything you only wanted loading up once. For example any battle rules , the board game etc..

Then you would use factory functions/constructors for anything you need to make various copies of, say the players or the battles

#### Another added benefit

Since all the methods are nicely organised in the IIFE, they are also namespaced too.

For example if you had a method called battle, to call 'battle' you would have to use start.battle() or boss.battle() etc so these methods would not get confused

---


## Conclusion

The module pattern is another great tool to have in your organising javascript box

- Immediately invoked when loading (good for API!)

- We can still access any methods that are returned in the module

- Can be used to make method/properties private

- Helps with the naming of methods/functions