Forem: NikhilBelide

Closures in JavaScript.

NikhilBelide — Wed, 25 Aug 2021 16:28:13 +0000

What is a Closure?

A Closure is bundle of a function along with its lexical environment.

In simpler terms, when a function is run, it checks in its surrounding state (lexical environment) and holds on to any variables even after the block in which those variables are has finished executing, if it thinks that it is going to need them in the future.

Here, function holds on to the reference to that variable and not the actual value itself and includes the parent scopes as well.

So, A continuous scope which holds the variables even after it has exited a block after execution so that they can referenced in future is a CLOSURE.

This scope along with is private variables exist as long as the function continues to exist.

Every JavaScript developer has come across closure even though they did not know this concept existed.

Let us go solve a few examples which explain this concept in a better way.

Let us start with a simple one.

let outer= function(){
    let a=5,b=20
    function insideOuter(){
        return a+b
    }
    return insideOuter
}



let outputOne=outer()
console.log(outputOne)
console.log(outputOne())



--output on console is ---
ƒ insideOuter(){
        return a+b
    }
25.

If you see above we are calling a function which returns another function called insideOuter.

We pass this into a variable called outputOne so that we can call that whenever needed.

When outputOne is called the insideOuter function is called which is dependent on the outer function scope because a when it is called, it sees the environment in which it was created and not the environment in which it was called.

So, a closure is which is already formed with that block.

But how do we know if it has formed or not? We cant see it right? Actually we can.

Let us put the execution on hold by placing a debugger at line 10 or at line 4 and lets observe the console.

If you observe carefully, at the bottom right it shows that it has formed a closure with outer function scope.

Now, As I said this scope will also include the parent scope as well if needed. So, let us add a few more steps to the code.


let outer= function(){
    let a=5,b=20
    function insideOuter(){
        let c=7.5
        function innerMost(){
            return (a+b+c)
        }
        return innerMost        
    }
    return insideOuter
}




let outputOne=outer()
console.log(outputOne)

let outputTwo=outputOne()
console.log(outputTwo)

let result=outputTwo()
console.log(result)

Here, we have outer which returns insideOuter function.
As we know this forms closure. When the return function is called that returns another function innerMost.

This innerMost first forms closure with insideOuter scope. But that scope does not have all the variables needed for it to run independently right. So, it looks above another level and when found it forms a closure.

In the above image, we can clearly see that since the innerMost is forming closure with both insideOuter and outer function environment/scope.

So, even after 1000 lines of code when we execute outputTwo as a function, the scope still persists.

Here is such an example.

Let us look at another example.


let multiplier =factor=>{
    return number=>{
        return number*factor
    }
}


let thrice=multiplier(3)
let thriceOfFive=thrice(5)
console.log(thriceOfFive)


---output on console ---
15

Here, Anonymous function forms closure with multiplier function environment and holds onto the variable factor.

Let us look at another example.
This is one of the most asked questions in interviews on Closure.
setTimeout function can mess the way closures are formed. Actually it will make us confusing.



for(var i=0;i<3;i++){
    function one(){
        console.log(`${i} from function one`)
    }
    const two=()=>{
        console.log(`${i} from function two`)
    }
    setTimeout(two,1000)
    one()
}

Here, We created a for loop and for every iteration we are calling the functions defined inside and logging the output.

The job of the functions is simple. They need to log a statement with i variable value at that particular point of time.

Take a good look at the code and guess the output.

You might think that the output might be this. I thought the same as well


0 from function two
0 from function one
1 from function two
1 from function one
2 from function two
2 from function one

Or something else, but the actual answer is this.

But why? What exactly happened? Why did we even get the output like this?

This is because of two reasons.

First one is that JavaScript does not wait for the time declared on setTimeout it instead takes timer along with the data that needs to be processed and stores it somewhere and continues with the rest of the program and once the timer expires it processes that part of the data.

And this is what causes the main problem. By the time the timer expires, since JavaScript does not wait, it has already run through the loop and as a result i value gets updated while function two is relaxing somewhere else function one gets executed.

Second reason is that, since we declared variable ** i** using var keyword and that is only function scoped not block scoped. So i here is on the global space. So, it does not need to form any closure as it will always be available.

So, since i is global, function two will point to the same reference and when the timer expires the i value at that particular point of time is logged.

Then how to we get an output where function two holds i? Simple. Lets make sure closure is formed. We can do this by making the variable i be declared using let keyword.



for(let i=0;i<3;i++){
    function one(){
        console.log(`${i} from function one`)
    }
    const two=()=>{
        console.log(`${i} from function two`)
    }
    setTimeout(two,1000)
    one()
}

Since let is block scoped, functions will form a closure with that block. So, now we get the output as follows.

If you look below, when the variable i was declared using var it is on global space.

While, when the variable i was declared using let both functions are forming closure with it. Which means i when formed, it points to a new reference for each and every function call.

This is what closures are.

Think of closure as saving a post on Instagram so that you can reference it later and once you decide its no longer need it you just remove that. The difference is that JavaScript does this job for us.

Thanks for the read.
Any feedback is highly appreciated.

Happy coding. 🤎

How to add Dark Mode toggle to a website.

NikhilBelide — Tue, 27 Jul 2021 21:23:55 +0000

According to me every website should have a DARK MODE toggle.
As most of the time we as developers, spend hours and hours working in front of our screens, having a dark theme option to a website will reduce the amount of eye strain during long sessions especially during the night.

So, lets take a look at how to add dark-theme toggle to a website using HTML, CSS and Vanilla JavaScript.

Here, we'll also be using browsers' local Storage to save the preferred state of the developer. This means that no matter how many times the page is reloaded or even closed, the browser will automatically switch the theme to dev's previous preferred state.

Below is how the browsers' local storage looks like.

Before we get started lets discuss a few things about local storage. This basically stores data as key and value pairs and the value can be only be a string. So, even if you want to store an object, that needs to be converted to a string as well.

Here is an example another example where you will be able to see the key-value pairs.

For now we'll have only one value as string so we don't need to worry a lot about the conversions.

The site that we are going to make is going to be very light on HTML and CSS.

Here are the site previews at different theme states.

The HTML body tag is going to be as follows.

<div class="container">
        <!-- header -->
        <header>
            <h1>Logo</h1>
            <div id="right_data">
                <ul>
                    <li>Home</li>
                    <li>projects</li>
                    <li>Blogs</li>
                </ul>
                <img src="./moon.png" id="switcher">
            </div>
        </header>

        <!-- section data -->
        <section>
            <h1>Dark Theme Swicther.</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing. Neque,psam mollitia! Porro magnam earum corporis amet vero maiores in perspiciatis consectetur d</p>
        </section>

        <!-- footer -->
        <footer>
            <p>Lets Connect</p>
            <ul id="social">
                <li>Twitter</li>
                <li>LinkedIn</li>
                <li>Github</li>
            </ul>
        </footer>
    </div>

In the above HTML, all we did was create a static page with a Header, Footer and a section with some data.

The img tag with the id="switcher" and a source is the one that does our theme switching using JavaScript.

Now, lets look the CSS.


*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root{
    --primary-color:#fff;
    --secondary-color:#000;
}
.dark_mode{
    --primary-color:#000;
    --secondary-color:#fff;
}
body{
    background: var(--primary-color);
    color: var(--secondary-color);
    text-align: center;
}
.container{
    margin: auto;
    max-width: 700px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    padding: 20px;
}
h1,h2,p{
    padding: 10px 20px;
}
li{
    cursor: pointer;
    list-style: none;
    margin-right: 15px;
}
img,svg{
    width: 30px;
    cursor: pointer;
}
header{
    height: 60px;
    width: 100%;
    display: flex;
    justify-content:space-between;
    align-items: center;
    text-align: center;
}
header ul{
    display: flex;
}
#right_data{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 10px;
}
footer{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    align-items: center;
}
footer ul{
    display: flex;
}

There are two things to look out for. One of them is :root which is CSS pseudo-class and it matches to the root element of the document which in our case is HTML.

Inside the :root we declared the colors that we want to use on our website and the advantage of doing this is that changing the color value in :root will affect the whole body which means we don't need to go to each and every line and change color if we decide change our website color.

Here is an example where all I did was following in CSS.

:root{
    --primary-color:orange;
    --secondary-color:rgb(20, 20, 20);
}

The other is .dark_theme in CSS which we will be adding to our HTML body using JavaScript to change the colors only by a click.

Now, moving on to the important part, JavaScript.

First step is to select the image with id id="switcher" and pass it on a variable and then we need to add an event listener to it.

let the variable be theme_switcher.

Event Listener, as the name suggests will basically listen to an event like click, change, submit, mouse-over etc.

What we need is a click handler and when clicked we need to do something. For now lets console log "clicked".


//selecting *img* of *id="switcher"* from DOM.
let theme_switcher=document.querySelector("#switcher")
//adding event listener to it
theme_switcher.addEventListener("click",()=>{
        console.log("clicked");
})

As you see above, now the console shows clicked.

But what we want is to change the theme right and at the same time wee need to change the way the switcher ( i.e. the moon icon to sun icon) looks as well.

So, dark theme will have SUN icon and light theme will have MOON icon.

So, when click event is fired, we need to add .dark_theme class to the body tag so that the --primary- and --secondary color variables value change.

To add a class to body, below is the code.

document.body.classList.add("dark_mode").

We can also use document.body.classList.toggle("dark_mode").
which toggles the class on body tag but for now lets stick with .add.

Now if we add, we need to remove it as well right? for that we use the below line of code.

document.body.classList.remove("dark_mode").

This is how the body tag looks on light theme

And this is how the body tag looks on dark theme.

See the difference in icon as well.

But how do we do that?

Remember the variable theme_switcher that we declared above? On DOM that is basically an image tag with an id switcher right? Correct.

We will change that img tags' source. How do we do it? Here is the code.

theme_switcher.setAttribute("src","./moon.png")

Notice the path or src inside it. It says moon.png while the HTML has sun.png. This is basically called changing the source.

setAttribute basically sets or to be precise, changes the src attribute of img tag to another image path when we click on the toggler.

Now lets look at the JavaScript code.

let theme_switcher=document.querySelector("#switcher")

theme_switcher.addEventListener("click",()=>{
    if(document.body.classList.contains("dark_mode")){

        document.body.classList.remove("dark_mode")
        theme_switcher.setAttribute("src","./moon.png")
    }else{

        document.body.classList.add("dark_mode")
        theme_switcher.setAttribute("src","./sun.png")
    }
})

So, what we are doing here is telling JavaScript that, whenever a click event is triggered then go and check if the classlist of body tag has dark_mode. If it has that class, It means that the dark theme is enabled. So, we will just remove the dark_mode class from the classlist of body and change the image tag source to sun icon.
If the classlist does not have any class called dark_mode which means that the theme is a light theme and since click event happened we switch to dark theme using *classList.add and then replace the img tag source to sun icon.

Lets clean the code a lttle bit using functions.

theme_switcher.addEventListener("click",()=>{
    if(document.body.classList.contains("dark_mode")){
        lightMode()
    }else{
        darkMode()
    }
})

function darkMode(){
    document.body.classList.add("dark_mode")
    theme_switcher.setAttribute("src","./sun.png")
}

function lightMode(){
    document.body.classList.remove("dark_mode")
    theme_switcher.setAttribute("src","./moon.png")
}

This is it. Now our toggle icons will do the theme switching whenever we do the click event.

Bu there are two drawbacks here. First is that if the page is refreshed the theme goes back to light and the other is that if you have multiple pages on your website then it's body tags will not have the class of dark mode.

By solving the first problem we can resolve the second issue as well. And we do that using local storage.

As I said before storage deals with key-value pairs. Let out key be theme_state and value be disabled_state which means that the website is at system default.

Now to save a key-value pair to the storage we use,

localStorage.setItem("theme_state", "disabled_state")

Here we are basically telling the browser that, take this key value pair and save them in storage.

The key is theme_state and the value is disabled_state

Now, there is no point in saving to local storage if we can't access it. So we access/ get the data using getItem(key) which will return us the value and we need to store this in a varible to know what the value is.

let storageValue=localStorage.getItem("theme_state")

This is the most important part.

Once we get the data from storage we need to change the value that key when click happens. But what if there our getItem command checks and finds out that the local storage is empty, which it will anyway for ever dev who runs this on his browser for the first time.

Then we need to set the local storage to default.
So, lets make some change to the code.

let theme_switcher=document.querySelector("#switcher")

let storageValue=localStorage.getItem("theme_state")
if(storageValue===null){
    localStorage.setItem("theme_state","disabled_state")
}else if(storageValue==="enabled_state"){
    darkMode()
}


theme_switcher.addEventListener("click",()=>{
    storageValue=localStorage.getItem("theme_state")
    if(storageValue==="disabled_state"){
        darkMode()
    }else{
        lightMode()
    }
})

function darkMode(){
    localStorage.setItem("theme_state","enabled_state")
    document.body.classList.add("dark_mode")
    theme_switcher.setAttribute("src","./sun.png")
}

function lightMode(){
    document.body.classList.remove("dark_mode")
    localStorage.setItem("theme_state","disabled_state")
    theme_switcher.setAttribute("src","./moon.png")
}

Oops! That's a lot of code. I know. Lets break it down.
So, before you even run this code, this is what the storage looked like.

Once you run the code, what it is doing in the start itself is that it is going and fetching the value of the key theme_state, but it wont find any since the storage is actually empty. So, it'll return null. If it returns null then we'll set the theme as default which in our case is light mode.

This is what the storage looks like now.

Ok, so now we have set the storage on default but we need to change the value when click event happens right? Correct.

theme_switcher.addEventListener("click",()=>{
    storageValue=localStorage.getItem("theme_state")
    if(storageValue==="disabled_state"){
        darkMode()
    }else{
        lightMode()
    }
})

That is the reason we wrote this code where we are telling the system that when a click happens go and get keys' value and then we compare it with a string "disabled_state". If the fetched value is equal to "disabled_state" we need to switch the theme to dark mode and we are doing that by calling the dark_mode() function and the function code is as follows.

function darkMode(){
    localStorage.setItem("theme_state","enabled_state")
    document.body.classList.add("dark_mode")
    theme_switcher.setAttribute("src","./sun.png")
}

Simple right. This is what the storage and the icon now look like.

Now in a similar fashion we need to change storage value to disabled_state when click event is fired once again and we are doing that by calling the light_mode() function and the function code is as follows.

function lightMode(){
    document.body.classList.remove("dark_mode")
    localStorage.setItem("theme_state","disabled_state")
    theme_switcher.setAttribute("src","./moon.png")
}

That is it.
Voila! Now you know how to create website with dark mode.

Few suggestions I'll make is that use .SVG format images/icons as they do look good even when compressed and are light in size. This will also result in faster website loading times.

Please comment your thoughts on dark mode and on this article as well.

Happy coding. 🤎

Hoisting in JavaScript.

NikhilBelide — Fri, 16 Jul 2021 22:04:01 +0000

Interviewer : Can you explain me the concept of Hoisting?
Dev : Sure. Hoisting is a phenomenon in which JavaScript magically🤺 moves the code to the top.
Interviewer :
Can you dive a little bit more deep?

Dev : Sure. Gives an example where we can call a function on a line which is before the function initialization.

Interviewer : Hmm.

In the end you wont get the Job.

I too have seen many tutorials, blogs and sites where they mentioned the same. But programming is not magic. There lies a logic. So, lets actually see how actually HOISTING works.

We know that when we run a script, a Global Execution Context (GEC) is created which consists of two phases. Memory creation phase and Execution phases i.e. run phase.
During this memory creation phase all the magic happens.

As soon as we run a script all the variables and functions are allocated space in the memory. This happens even before the first line of code is executed. This is the reason we are able to call/access functions or variables on a line which is before their initialization and not face any errors.

Don't believe me? Let's see with an example.

Lets run the following code.

Nothing weird right? Now, lets make some changes.

Noticed the change? We called the function before its initialization and we still see the same output.

To see what exactly happened lets put a debugger on line 1.

So, we are at line 1 and we haven't executed anything yet.
But as we discussed, memory is allocated to functions and variables before the execution phase.

So, if what I said is true then the memory should show the function and variable now right? Correct.

Observe the above two images, under Global(which is on bottom right) and you'll see a : undefined and one : f one(); and remember we are still at line 1

So, if they are in the memory we should be able to log them as well right? Yes.

Making a few changes and the code now looks like this.

Now, lets log them.

See that? By default variables are given 'undefined' and functions are stored along with their code in memory before script execution phase. That's the reason we see undefined and inner function data in console and that is the reason we are able to access them at lines on code which are before variable initialization or function initialization.

For now, lets concentrate on functions and it's hoisting.
So, if a function is saved in memory along with the whole code before the run, we will also be able to use them on a line in code before their initialization or anywhere right? Correct.

Lets make the code cleaner and see an example and the HTML code as well.

Notice the above data very carefully.

Notice the console, the DOM, the storage and where the debugger is placed and until what line the code has been executed.
So, we have run till line 5 and the storage holds var a:100 and we have it on the console as well. A debugger is before the function one() and the DOM page one the browser has only the initial data.

Now lets call the function one() and see the changes.

Noticed? The DOM? Console? and the fact that we are yet to run line 8. We have successfully called/accessed function one() before its initialization.

This is what Hoisting is. This is how powerful💥 hoisting is and how things run behind the scenes.

So, next time when an Interviewer asks what hoisting is, you should not be like magic happens and code moves to the top.

Also I would like to thank Akshay Saini (@akshaymarch7) for the way he explained this topic and many more in such an accurate manner.

Any feedback would be highly appreciated. 🖤