How JavaScript Closure is used in real life project ?
Tags: javascript, react, node
Published: 2021-02-12 16:26:30

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h9mow2sf9oz50897nq2u.jpg)

## First things first, what the duck is Closure ? 🦆*Wack*

I wrote a small example here "[How to explain Javascript Closure for 5 years old kid](https://dev.to/papercoding22/how-to-explain-javascript-closure-to-a-5-years-old-kid-4d6n)":

So, if you are new to Javascript or never heard or not really understand what the "duck" is Closure, you need to go to back and eat that duck first.

## HTML & Pure JS

Let's see a small example from [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)

```css
// CSS File
body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}

h1 {
  font-size: 1.5em;
}
h2 {
  font-size: 1.2em;
}
```

```html
// HTML File
<p>Some paragraph text</p>
<h1>some heading 1 text</h1>
<h2>some heading 2 text</h2>

<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>
```

```jsx
// JS File
function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;
```

- This code snippet above is how basically closure is applied in web development.
- `size12`, `size14`, and `size16` are predefined functions that resize the body text to 12, 14, and 16 pixels, respectively.
- `makeSizer` activates "Closure in Javascript" and holds the size for each function. Now we attach them to buttons

In JavaScript, closures are created every time a function is created, at function creation time. 

⇒ We have 3 closures are created and each one of them holds their own size.

## React

- Continuing with the above example, it will often be used in React as well.

```jsx
function SizeButtons(props) {
  const listSize = props.listSize;
  const listItems = listSize.map((size) => {
		const handleOnClickItem = () => {
			document.body.style.fontSize = size + 'px';
		}
    return (<button onClick={handleOnClickItem}>{size}</button>);
	});
 
  return (
    <div>{listItems}</div>
  );
}

export default function App() {
  return (
    <div className="App">
      <p>Some paragraph text</p>
      <h1>some heading 1 text</h1>
      <h2>some heading 2 text</h2>
      <SizeButtons listSize={[12, 14, 16]} />
    </div>
  );
}
```

- Try it at [codesandbox](https://codesandbox.io/s/react-closure-example-1-2ov2y?file=/src/App.js)
- So we have an array `listSize` is passed as a prop into `SizeButtons` to render the list of size button.
- We use JavaScript `map` to loop through the array and at each item, we return `<button>` element for each item.
- Finally, we assign the resulting array of elements to `listItems`:
- In mental modal, `listItems` looks like this `[renderButton12, renderButton14, renderButton16]`, which means 3 functions to render 3 buttons. And in each function, the size value is attached.
- So a closure is created every time the callback function is called from `map`
- And at this case we have three closures, right !
- This one is similar to the first example, but it is written in a bit different way.
- So let's try to re-write and translate it to exactly similar way to the first example with HTML & Pure JS:

```jsx
import "./styles.css";

const makeSizeButton = (size) => {
  return function() {
		document.body.style.fontSize = size + "px";
	}
};

function SizeButtons(props) {
  const listSize = props.listSize;
  const size12 = makeSizeButton(listSize[0]);
  const size14 = makeSizeButton(listSize[1]);
  const size16 = makeSizeButton(listSize[2]);

	const button12 = <button key={12} onClick={size12}>{listSize[0]}</button>
	const button14 = <button key={14} onClick={size14}>{listSize[1]}</button>
	const button16 = <button key={16} onClick={size16}>{listSize[2]}</button>

  const listItems = [button12, button14, button16];

  return <div>{listItems}</div>;
}
```

- Try it at [codesandbox](https://codesandbox.io/s/react-closure-example-2-w58f5?file=/src/App.js)

## Redux

- This simplified [snippet code of Redux](https://gist.github.com/gaearon/ffd88b0e4f00b22c3159) `createStore` function, but I will remove a bit its code in order to focus on what we are focusing "Closure"

```jsx
// createStore.js
function createStore(reducer, initialState) {
  var currentReducer = reducer;
  var currentState = initialState;
  var listeners = [];
  var isDispatching = false;

  function getState() {
		// ...
  }

  function subscribe(listener) {
    // ...
  }

  function dispatch(action) {
    // ...
  }

  function replaceReducer(nextReducer) {
    // ...
  }

  dispatch({ type: '@@redux/INIT' });

  var store = { dispatch, subscribe, getState, replaceReducer };
	return store;
}

const store = createStore(...);
```

### Why closure is used here ?

[As Redux official document says:](https://redux.js.org/api/store)

A store holds the whole state tree of your application. The only way to change the state inside it is to dispatch an action on it.

- This means `currentState`  of  `createStore` is inviolable 🏰, it is inaccessible from outside, only inside `createStore` function can access and update it.
- The `createStore` only returns a method to update the state is `dispatch`, and of course, it will rule how dispatch works. 🤴
- We— "application developers" have to follow the rule.
- So closure allows us to [emulate private methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#emulating_private_methods_with_closures), and properties inside a function scope, because JavaScript does not provide a native way of doing this like Java, C# or some other class-based programming languages.

### How about without Closure ?

```jsx
// Without closure
function createStore(reducer, initialState) {
  const store = {};
  store.currentReducer = reducer;
	store.currentState = initialState;
	store.listeners = [];
	store.isDispatching = false;
  store.getState = function() {
    // ...
  };
	store.dispatch = function() {
		// ...
	}

	// ...
  return store;
}

const store = createStore();
// It allows us to mutate the store
// Which is anti-pattern i
store.currentReducer = null;

```

So in conclusion: 

Closures are useful because they let you associate data (the lexical environment) with a function that operates on that data. This has obvious parallels to object-oriented programming, where objects allow you to associate data (the object's properties) with one or more methods.

## Express.js Middleware

- Almost common middleware libraries out there are written in "Style of Closure" . Ex: `cors`, `morgan`, `compression`
- For example: a code snippet inside compression middleware source code

```jsx
function compression (options) {
  var opts = options || {}

  // options
  var filter = opts.filter || shouldCompress
  var threshold = bytes.parse(opts.threshold)

  if (threshold == null) {
    threshold = 1024
  }

  return function compression (req, res, next) {
		// ....
	}

}
```

- And how it is used in Express app

```jsx
var express = require('express')
var cors = require('cors')
var app = express()
 
app.use(compression({
	// @TODO: Configure options here
}))
...
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b9m5fxj6zf5d6oeuy2tm.png)

- Because middleware needs to store its options through the app's life cycle.
- Whenever Express app call to the middleware, it needs to read the options was initially configured.

In collusion, most of the case, closure is used whenever we need to store something at the run time, such as app global data (Redux), configs, options (Express middleware) in private, or attach data to callback event (React), so that we can access it later when the functions are called to.

“Program to an interface, not an implementation.”
Design Patterns: Elements of Reusable Object Oriented Software