Pillar of JavaScript: Closures

Photo by Clément Hélardot on Unsplash

Did you ever wonder when it comes to JavaScript why everyone says Closures are the heart of JavaScript? In this blog, we will discuss closures in depth.

The closure is a function along with its lexical environment. Seems complicated, huh? Let's break it down even more.

Let's start off with functions.

Functions are first-class citizens in JavaScript what does that mean? It means functions can be passed anywhere as we pass any data maybe as an argument to another function. In short, underneath the hood functions are just objects which are callable in nature. so where ever you can pass an object you can pass a function. That’s why it's called a first-class citizen.

Next, Lexical Scope: Let's break down those words.

Lexical — where ever it's written

Scope — What it has access to.

So in simpler words function (where ever it's written) along with whichever variable it has access to is called Closure.

Let's take an example:

function outer(){
   const grandpa = "grandpa"
   return function middle() {
       const father = "father"
       const number = 123444545 
       return function inner(){
          const son = "son"
          return `${grandpa}>${father}>${son}`
        }  
    }
}
outer()()()
// grandpa>father>son

Here, when we invoke the function outerwe get function middlein return, and when we invoke function middlewe get function innerin return and when we invoke inner we get grandpa>father>son. did you think why does function inner has access to variables of function outer and middle?

It's due to closure, that the child will have access to all the variables it needs from its parents even when the function is removed from the call stack. so what actually happens is even when the function outer is removed from the call stack.

The JS Engine keeps the memory allocated to the variables which are needed in the child function. So even when the garbage collector runs it won't delete the variables which are needed by the child but the const num will get deleted as there is no use of const num in child function.

So, in simple words — whatever the child will need will be kept safe in [[scope]].

That's why closure is also called lexically scoping as even before invoking the function JS engine already knows which function has access to which variable because JS is lexically scoped.

Benefits of Closure:

There are so many benefits of using closure but I will mention two main ones.

1. Memory Efficiency — Due to closure, we can create allocate memory for the data which doesn't need to be changed locally in private variables. instead of wasting memory in reallocating every time it's invoked.
2. Encapsulation — Encapsulation means hiding the data you don't wanna give access to others. Using closures you can only give the functions and variables which you want to be public and keep the rest private without giving access to everyone. for example, you don't want to give access to your API Key to the public or your whole team. so you can encapsulate it using closures.