Master JavaScript Closures to Enhance Functions and Scope

We are going to learn how to use JavaScript Closures. It is one of the most confusing topics in JavaScript, but I will try my best to explain in the easiest way. A closure is created when a function remembers the variables from its outer scope even after that outer function has finished running. The inner function can access the variables of the outer function even though the outer function has ended. If you call the inner function later, it still remembers the variables from the outer function. That is the basic definition of a closure.

What are JavaScript Closures

    In simple words, the inner function can access variables of the outer function even after the outer function ends. The inner function is the function inside a function. It can remember and access the variables that are present inside the outer function. This is the concept of a closure. If you understood it, then great. Otherwise, the examples below will make it clear.

Greeting with JavaScript Closures

    Here is a straightforward example:

function outer() {
  let name = 'AIT';

  function inner() {
    console.log('Hello ' + name);
  }

  return inner;
}

const greet = outer();
greet(); // Hello AIT

    How is it accessing `name`? The variable `name` is present in the outer function. The inner function is accessing `name` from the outer function. The outer function is returning the inner function. Every time you call the outer function, it returns the inner function, and this inner function contains the logic that says `Hello` plus `name`. The name is coming from the variable of the outer function. I am storing the returned value of `outer` inside a variable named `greet`. The outer function returns the inner function, so the inner function is now stored inside `greet`. When I call `greet()`, the outer function has already ended, but the inner function still remembers the variable `name` from the outer scope. That is the beauty of a closure.

Step-by-step

Create an outer function named `outer`. Inside it, declare a variable `name` with some value. Define an inner function `inner` that uses `name` and logs a message. Return the inner function from `outer`. Assign the returned function to a variable, for example `const greet = outer()`. Call `greet()` and see that it still has access to `name` from the outer function.                         If you are curious about caching results with functions that remember previous values, check out memoize functions.

Pizza maker with JavaScript Closures

    Here is a real life style example to make it even clearer:

function pizzaMaker() {
  const secretIngredient = 'cheese';

  function addToppings() {
    console.log('Making pizza with lots of ' + secretIngredient);
  }

  return addToppings;
}

const makeMyPizza = pizzaMaker();
makeMyPizza(); // Making pizza with lots of cheese

    Think of `pizzaMaker` as a pizza shop. It has a secret ingredient, which is `cheese`, that no one outside can see. It gives you a chef, which is the `addToppings` function, that remembers the secret ingredient. Every time you call `makeMyPizza()`, which holds `addToppings`, it prints the secret ingredient from the outer function. Even after the shop is closed, the chef still remembers the secret recipe. This is exactly what a closure is. If you need to keep data around outside of functions for later use in your app, you might also store it in the browser. See local storage.

Using JavaScript Closures in practice

    There is nothing much to get worried about. You just need to understand what the concept says. I have worked on a lot of projects, and I rarely needed to use closure properties directly. If there are chances that you need to use them, you can easily implement the pattern shown above. It is as simple as what I explained here. When your closure works with API responses or text data, you often start by turning JSON strings into objects. See JSON parse to handle that part cleanly.

Final Thoughts

A JavaScript Closure is when an inner function remembers and accesses variables from its outer function even after the outer function has finished. The key points are simple: define an outer function with some variables, return an inner function that uses those variables, assign the returned function to a variable, and call it later. The inner function will still have access to the outer function’s variables.