Javascript Closures

Hey everyone today i am going to cover a very important topic in javascript i.e Closure.This concept is very easy but requires some fundamentals to grasp it quickly.So i will start from the zero and try to make u understand and have an idea of this topic...

Hoisting in javascript

So first of all we have to know the term Hoisting and get familliar with it.

When we declare some variable in js,A place in memory gets allocated to it with the name of that variable on the top of the program like in the given example...

var a = 10;
console.log(a);

here in this program variable 'a' would be hoisted in the memory and then we can see in line-1 it is initialising to a value 10.So in the block of memory named 'a' value is placed. and when we want to use it in line-2 it gets the reference from the block of memory and gets us the stored value in it.

Till now everything seems fine but what will happen when we do something like this:-

console.log(a);
var a = 10;

Now we are using it before even declaring it... would it throw any error??

the ans is a big NO !! now i know some of you might think i have lost my mind or i am just gone mad but its basically what hoisting is!

Actually a is being hoisted even before it is initialised with some value... and here we can use it before initializing it. It also clears the difference between declaration and initialisation.Because it is declared in the block of memory and it is getting initialised in the line-2.

But what line-1 would print if the value of a is assigned after it?

So it will print undefined as we are using 'var' keyword the variable using var is initialised with undefined during hoisting...

So in the given piece of code let us try to find out the output on our current knowledge:-

console.log(a);
var a = 10;
console.log(a);

here output of line-1 is undefined and output of line-2 is 10.

Cool !! But what will happen when we do something like this?:-

console.log(a);
let a = 10;

What!!!! it is giving an error :(( That means what all we've learnt was wrong ? and hoisting is just a myth?? :((

No my friend Hoisting is still happening here but it is giving an error due to our next topic that is 'Temporaral dead zone'.So lets find out why our this code is giving an error but using var we are not getting any error!

Temporaral dead zone.

So in simple language it is a "zone" between declaration and initialisation of a variable.When we declare a variable using 'let' keyword the variable gets hoisted but unlike 'var' it doesnt gets initialised by undefined.

As the error itself says :- ReferenceError: Cannot access 'a' before initialization.

A variable in temporaral dead zone is there but it cannot be accessed because it is not initialised!

Now let us go ahead and learn what is closure : -

Closures.

In simple words a closure gives you access to an outer function's scope from an inner function. A closure is a function inside a function that has reference to its lexical scope.

Let us try to understand it using the code below:-

const x = ()=>{
        let a =5;
        console.log(a);
        const y = ()=>{
            console.log(a);
        }
        y();
}
x();

here when we call function x.

first a would be hoisted then at line-2 it will be initialised as (a=5). After that it would be printed in line-3.And then function y() would be called.So in function y() 'a' is not declared but it have access to reference of outside elements because it is a closure so it will print 5!

now what would happen in the following case:-

const x = ()=>{
    let a = 'x';
    console.log(a)
    const y = ()=>{
        // let a = 'y';
        console.log(a)
        const z = ()=>{
            // let a = 'z';
            console.log(a)
        }
        z();
    }
    a = 99;
    y();
}
x();

First try yourself and then go ahead(Recommended)

So first function x() would be called, and 'x' would be printed.

then value of a would be updated by 99 and then function y() is called

and 99 would be printed then function z() would be called and again 99 would be printed...

Thank you everyone for reading my blog ,I hope you have liked it and sorry if it seems unprofessional i am trying to improve my writing skills :))

~by Jesmeek Singh Bhugra

Closure in Javascript

Hoisting in javascript

Temporaral dead zone.

Closures.