JavaScript: Closures, a simple example

What they are, how they work, and a simple code example

Suppose you wanted your boring ol’ function to have superpowers. Suppose you wanted it to be able to remember stuff, and not just run once and fook off. Suppose you wanted it to have a counter that keeps track of how many times it ran or have its own private variables that it can update.

Say no more! Shout the word “Closure” as loud as you can.

A closure gives us the ability to store extra functionality and variables around our functions.

A closure is formed when we place our function inside another outer function. Sounds weird, but when we do this, our function feels like it’s a part of something, and it feels alive. It starts to remember things around it. It makes references to any variables around it. And it keeps them with it for lyfe.

This outer function around our function acts as a closure.

function wrapper() { 
  let counter = 0;
  function innerFunction() {
      counter ++;
      console.log (counter);
  }
  return innerFunction; 
}

The steps to create a closure, as we can see in the code above is to:

• Place a wrapper function around your function
• Add variables inside your wrapper function
• Return your function at the end, so we can use it later

To use the closure, you call the wrapper function which will only return the inner function. You don’t have access to the counter. But inner function will always have access to it.

let closure = wrapper(); 
closure(); // output: 1

Within this closure, the following rules apply:

• Our function which was declared inside of the wrapper function has access to all variables and functions declared inside the wrapper function
• Our function which was declared inside the wrapper will always have access to all variables and functions declared inside the wrapper function
• The value of those variables will persist through multiple executions of the function. That means the function can increment the data many times, and it will remember its previous values.

Let’s see another code example.

Note: You can declare variables and functions that you don’t return to the rest of the code. This will keep them for private use.

function wrapper() {
  let memory = 0;
  function privateFunction() {
     return "I keep my memories";
   }
  function innerFunction () {
    memory ++;
    console.log (privateFunction(), memory);
  }
  return  { innerFunction }; // note: we only return innerFunction    here, not privateFunction
}
let closure = wrapper();
closure.innerFunction(); // output: I keep my memories 1
closure.innerFunction(); // output: I keep my memories 2
closure.innerFunction(); // output: I keep my memories 3
closure.privateFunction(); // Not able to access it!!! Private

So what are the benefits of closures?

• Wrapping functionality together in an outer function
• Exposing only some functionality, keeping the rest of the variables and functions private to prevent unwanted data modification
• Having a persistent memory

Ahuh…What about the disadvantages?

• Memory leaks, as you can see the function always keeps track of its previous calls and state/variables