DEV Community: Maitra Khatri

Understanding Closures in JavaScript

Maitra Khatri — Sat, 28 May 2022 09:36:47 +0000

Introduction

According to our friendly neighborhood teacher MDN Docs:

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).

Function + it's lexical environment = Closure

First things first

Now, we know what a function is and in order to understand Closures completely, we first need to understand Lexical Environment.

If you already understand Lexical Environment lets move ahead, if not then I already have a dedicated blog explaining Lexical Scope and Environment from scratch, to read it click here ↗️

So now you know how lexical scope works.

TL;DR - inner functions can use parent/outer function's variables and functions.

This can be shown by very simple example:

function greet() {
  const userName = "Maitra";
  function greetMsg() {
    console.log("Welcome,", userName);
  }
  greetMsg();
}
greet(); //output: Welcome, Maitra

Now, what if I need to extract the inner function and use it like an independent function. Will then it be able to access the userName variable from its parent function ?

The answer is YES !! and the reason is Closures !!!!

Closures

You don't believe me ? Try it yourself:

function greet() {
  const userName = "Maitra";
  return function greetMsg() {
    console.log("Welcome,", userName);
  };
}
const displayMsg = greet();
console.log(displayMsg); //output: ƒ greetMsg() {}
console.log(displayMsg());//output: Welcome, Maitra

As you can see, displayMsg is nothing but the function greetMsg but the interesting thing here is that the function displayMsg has no mention of the constant userName, still when called it prints its value.

Although, we we extract an inner function and we can see that the function is alone, but it always comes with its lexical environment (i.e its own lexical scope + its parent's lexical scope)

That's it, the simplest explanation of what Closure is. We can also say that:

Closure is a function that remembers the variables from the place where it was defined, regardless of where it is executed later.

Little fun ft. Doremon

Now I wanna have some fun and that's why I have prepared this fun example that uses closure.

function pocket() {
  const strengthPill = true;
  function doremon() {
    return function nobita() {
      function fightGian() {
        if (strengthPill) {
          console.log("win");
        } else {
          console.log("lose");
        }
      }
      fightGian();
    };
  }
  return doremon();
}
const nobitaAlone = pocket();
console.log(nobitaAlone); //output: ƒ nobita() {}
console.log(nobitaAlone()); //output: win

Here, we can see that only if nobita has the strengthPill then he can win against Gian. And as usual nobita is under the protection of doremon and has access to the strengthPill. But what if he has been extracted out and he is alone ???

As we can see in the function nobitaAlone, we only have the function nobita and no mention of the strengthPill, so technically he should lose. But thanks to Closure nobita still has access to the strengthPill and can defeat Gian 🥳

I hope you learned something new and enjoyed the fun in the end. If you did then do checkout:

And don't forget to follow me :)

Understanding Lexical Scope in JavaScript

Maitra Khatri — Mon, 28 Feb 2022 15:39:25 +0000

Introduction

Remember the time when you're writing some code, you try to access an variable but it throws an error that variable is not defined. But you can clearly see that you have defined it and used it multiple times in the function above. That's exactly where Lexical Scope comes in the picture.

Lexical Scope

Let's understand this by an example :

const name = "Maitra";

function helloWorld() {
    console.log("Hello World !! I'm", name);
}

helloWorld(); //Output: Hello World !! I'm Maitra

Here you have declared a variable in Global and can use anywhere in the code, inside many nested function and it will still work. But it does not work vice versa.

function user() {
    const userName = "Maitra";    
}
user();

console.log("Hello World!! I'm",userName); //Output: Uncaught ReferenceError: userName is not defined

This happens because userName is not present in the Global Scope, it's only present in the lexical scope of the function user.

In very simple words lexical scope means the places in your code where a certain variable/function is accessible and you can use it.

Now let's talk about what all things comes under the lexical scope of a function, lexical scope of any function has two things:

It's own local memory
Lexical Scope of the Parent

It means a function can access all the variables & functions that are defined inside itself and in it's parent.

Lexical Scope = Local Memory + Lexical Scope of Parent

Example:

const greetings = "Good Morning !!"

function greetUser() {
    const userName = "Maitra"
    console.log(greetings, userName)
}

greetUser();//Output: Good Morning !! Maitra

Note: by default global is the parent of all functions.

Trivia: global also has a parent, it points to null, so when the program reaches to the global's parent it exits.

Scope Chain

Now here comes the interesting part, a function can not just access it's parents variables & functions but all the ancestor's too (Ancestors are parent's parent). Let's understand this by a very simple yet effective example:

const a = "This"
function scopeChain() {
    const b = "is a"
    function x() {
        const c = "simple yet"
        function y() {
            const d = "effective example"
            function z() {
                const e = "of Scope Chain"
                console.log(a,b,c,d,e)
            }z()
        }y()
    }x()
}

scopeChain() //Output: This is a simple yet effective example of Scope Chain

This is how the above example works:

function z looks for a b c d e inside itself.
It finds e but not others, so it goes into it's parents (y) lexical scope and looks for them.
There it finds d but not other, so it goes to it's parents lexical scope
And this loop continues until all the variables are found

The entire process of searching inside local memory/own lexical scope, if not found then go to parent's lexical scope and repeat is know as Scope Chain

Remember here I said illustrated all the examples using variables but all of this rules applies to functions too, as functions are first class citizens in JS.

I hope this helped you, if it did then do let me know and also share it with your friends because knowledge is the only wealth that increases on sharing :)