JavaScript Closures Simplified

I will be using a simple story to explain how closures work in JavaScript and my promise to you is that you’ll understand what closure means and how it works once you’re done reading this article.

There is a story of a father who has a child (we’ll make both the father and son functions, but mind you, the son lives inside the father). So we declare the functions like this:

function father() {
  
  function son() {

  }
}

Now, the father loved the son so much that he’s ready to provide him anything the son want in order to him. But the father’s lifetime dream was to buy his own dream house (we’ll pass this as an argument house to the father’s function).

function father(house) {
  
  function son() {

  }
}

At age 30yrs, the father was able to acquire a house (let’s say the house is unknown based on the value we’ll pass to the father’s function which will take in an empty string value); and then he moved in with his son. As a good father, he gave the son key to have access to the house anytime he wants.

function father(house = "") {
  const fHouse = house;

  function son() {
    return `${fHouse}`
  }
}

Fast forward, few years later the son who is now a grown up adult was able to buy his own car (we’ll pass this as an argument too with an empty string value).

function father(house = "") {
  const fHouse = house;

  function son(car = "") {
    sCar = car;
    
    return `${fHouse} ${sCar}`;
  }
}

Although the child can access his father’s house anytime (this is what we call global variables), the father can’t access his own son’s car at all (it’s function scoped) thinking that the son might take advantage of that to disrespect him (which means you can’t access a function variable outside of the function).

Now, at age 60yrs the man did a property will with the name theAwoyemiWill which return (contains the whole bloodline family properties that includes both his own house and the car his son bought so that the son won’t have to do his own will again for the car); and the will also gave only the son rightful access to the father’s house and his own car even after the father is gone/dead (this is what is known as Closure — Closures are the ability of a child function, or an inner function, to access variables from a higher level scope even after the functions have been called or closed or closed over).

function father(house = "") {
  const fHouse = house;

  return function son(car = "") {
    sCar = car;
    
    return `${fHouse} ${sCar}`;
  }
}

const theAwoyemiWill = father("bungalow");
console.log(`The son inherit ${theAwoyemiWill("Mercedes")} at the end.`);

The name of the will is theAwoyemiWill (we stored it as variable) which later contains the father’s property which is the house. But even after the father is dead and buried (the parent scope has been run), we can still have access to the father’s house (which was stored as fHouse variable due to the fact that the son’s function will still be alive and accessible to us).

You might think how can we make use of this in our application. One thing you must know is that anytime a function is run in JavaScript and it returns a value, it means the end for the function. But we can indirectly take advantage of closure and make sure we keep it alive somehow by return a child function inside the parent’s function. With that, even after the parent’s function has ended, the child’s function can still be alive and perform actions in our programme.

Let’s say we want to create a sport game recording application for a particular player, whereby we want the player score to automatically get incremented each time a goal is scored by a player. We can declare the score variable within the father’s scope function and increment it within the son’s scope function like this:

function game() {
  const playerName = "Victor";
  let score = 0;

  return function win() {
    score++;
    
    return `${playerName} soccer player score is now ${score}`;
  }
}

Now, if we loop through 5 times in the game, we’ll notice that the score will keep iterating several times, updating the scores as the player keeps scoring and the program keeps running.

function game() {
  const playerName = "Victor";
  let score = 0;

  return function win() {
    score++;
    
    return `${playerName} soccer player score is now ${score}`;
  }
}

const playerGame = game();

for(i = 0; i < 5; i++) {
  console.log(playerGame());
}

The score variable here is what is called Private variables in JavaScript because we have created them separately both within the game and win functions.

I hope by now you’ve understand the concepts behind closures in JavaScript. A big thanks to Wes JavaScript documentation which really simplified things for me. If you’re looking to learn about JavaScript as a beginner, I highly recommend you check out his free book.

I hope this article has been so helpful to you. Don’t forget to give me a clap 👏 and follow me on twitter , facebook and youtube.