Closures in JavaScript | Inside a loop, inner function and setTimeoout

ladies and gentlemen today we're gonna try to understand one of the most important topics in jóska call closure we not try to go as deep as possible I'm taking this challenge because today I'm in a good mood and my mind is very clear to teach also you know that closure is one of the most asked interview questions in JavaScript and some time even the interviewers don't know the meaning of closure they might know some definition but they don't know the meaning so knowing closure is very important to understand what closure is we need to understand how it works inside a loop inside a function inside a promise inside a timeout and I will try to explain all of that even today in a very clear language and let's do one thing and I'm very serious when I say this you can like the video even before watching here and I promise you that by end of this video if you're not satisfied with the answer that I give it to you you can unlike it and you can leave me a nasty comment well not so nasty because you know you might have some children learning JavaScript so but you can be you can use some harsh works but in order to learn you have to have an open mind if you already have some sort of preconceived notion about a closures then doesn't matter what I teach you you're gonna just keep that information in sight and remember you don't have to take my word for it you have to understand yourself you need to experiment you need to practice and then verify the information I give it to you so let's get started and welcome to taxi tutorials all right to understand closures we need to understand why do we use closures right now closure is a particular problem that we're trying to solve so what is the problem there's a very good reason why we have closures in Chaska and that is because there is a problem and we try to solve the problem with the cultures javascript has what is called lexical scoping lexical scoping means the variable that are defined outside your scope basically upper scope are automatically available inside you don't have to pass it in there just automate liveable so let's say if I have let I equal to 1 and let's create a function so I can create a function called F which is nothing but an aerial function and if I just console.log I this should be available inside because of the lexical scope so if I execute this function it should give me one now here in this case and when I define the function it's it's available outside you are trying to use something from outside the scope but that becomes unpredictable what if this is not available when you execute this function in this case it is right if I do console.log here it's available and so we can conveniently use it but what if I move this function somewhere else in and execute it now as you can see JavaScript it has is a functional programming language for the most part where you can define function somewhere else pass it into another function or call it using calling later using set timeout or promises whatever right in all of these cases you define function in one scope and then you executing in some other scope and so it's not available when one some time and use it so let's create such a situation and see how it behaves right so what I'm gonna do I'm just gonna wrap this whole thing in a scope so I'm just gonna create if true true mints always execute who's gonna put the whole thing inside here so right now I is here and the function is here but I'm executing outside now in this case if I execute more one because the function that are defined inside the scope using let keyword that are not available once the scope is done right so I won't be able to execute this function I would say F is not defined to solve this problem I can do something interesting I can just define it outside so let's do that it's gonna define it outside but I cannot use cons in this case because you cannot use you cannot really find it if I use it the cons so I'm just gonna use let and then inside I'm gonna provide the definition of the function and I'm gonna execute outside this now here if I console.log fine it's it's not gonna be available right so I is not available here however if I run it somehow magically it prints I because it's it it holds this variable inside so where is it hold if I console.log f but actually I have to use console.log dir dir is nothing but log with some extra information so I can shoot the prototype in all that so if I look at the function inside I have a scope inside it would hold this variable so here you see this block so the block really means because the you will be running this in a and a jsfiddle environment which is wrapped inside the windows window onload function so holding everything into one windows onload and that's why you see I equal to one here inside the block and this is similar to closure we're gonna look at the closure example but in this case it's holding inside this block now let's look at the this is more like a simulated situation right well let's look at a real situation where you define your function somewhere and you execute somewhere in a different block and you have to use a closure so let's create a function called F equal to and inside I have a variable let I equal to 1 and what I'm gonna do is I'm gonna create an inner fun inner function but what I want to do I'm just lazy today so instead of creating and then returning I'm just gonna return a function so let's just do that return a function and remember this is an anonymous function because I'm not naming it and all its gonna do is console.log I okay so now this variable eyes inside this block which is this function and this return returns a function which can use this eye from outside its scope which is available here for for now however what if I call f here what would happen what I call this f it nothing but it returns this function so let's look at it so I'm just gonna say console dot dir and so you should see that an ALICE function that it returns and inside you should see the closure I can see the closure before we were seeing the scope now it's you can see the closure which is one so this is where it's hold now let's create another variable here let J equal to 2 okay now if I run this examine the function I would say closure but I only see I it doesn't close J inside us why because it's not using it you only have closure for the variable that you're gonna use in the future right since you're not using J there's no need to have a closure for chain however if I just take this console.log and also create another console f4j then wallah I will have a second closure I in J so now let's look at another example a closure inside a loop another interview question if you have been to an interview in a recent time you probably they probably ask you let's go this question as well so let's do it so if I have a for loop let's say let I equal to 0 to I less than let's say 3 and I plus plus and let's define a function Const f equal to the same function and inside to say concert log I not a big deal now here it's predictable right because eyes outside and you can use an insight right away if I execute here I'm not moving it anywhere so if I print it I would get 0 1 2 which makes sense right because it starts with 0 and it's less than 3 so 0 1 2 now let's try to run it outside disco how do I do that if I wrap this whole thing with a set timeout set timeout means whatever I'm passing it inside a function run it after a specified time so it doesn't run it right away he just wants it after given time so here as a second argument I can say running after thousand milliseconds it's always in milliseconds and thousand milliseconds means one second right I don't really have to execute now because it it runs it after this one second just think of what a really happening to you so you would have I equal to zero and then it would run this function and it sets the time out for this function for one second and then we I equal to 1 and do the same thing I equal to 2 it would do the same thing so after the whole for loop is done and then after 1 second it would start running those functions and you can you can verify this if I say consul blog after the loop and now if I run this it says after the loop and then 0 1 2 so let's say when it's running it it has to hold all 3 variables inside now let's change this let to 1 and now something magic of what happened and this is a very common interview question I would get after the loop and then 3 3 times and so interview I ask you ok why am I getting 3 3 times most of all you know my loop should be running from 0 to 2 I should not even go to 3 and why is he getting three times well to understand this let's put this back to less and see what's really happening ok so let's do a step by step so first is gonna be 1 so let's just say I equal to that's why not 1 0 and then function would have some closure inside it would close the I because I'm using lat which is a block scope as soon as the for loop ends when new for loop comes back in my I doesn't really exist so it has to give me a new I right so it would give me I again which is completely new right so which is gonna be 1 and F the function is gonna hold dad I so the first I was actually 0 second I it's gonna be reference to this I so it's gonna be one and subsequently I we'll have you put the two and it would hold a reference to this so I would get three three different function which holds three separate variable X closure so these are three separate eyes and so that's why I get zero one two okay now let's switch this to Y so first time I equal to zero function will have a closure with reference to this eye which is nothing but zero right all right so now the second iteration I equal to one now in this case because var is has function scope if you want to know more about you know functions go in blocks go by editorial I'll provide a link here so that you understand more if you want to know but because it's a function scope it doesn't really create a new variable it just changes the variable value so this is not a new variable for the second iteration it's a same variable with a different value so what's gonna happen f it's still has the second function has a still is gonna hold the closure as the original eye but now the value has changed so the bolt would change so this would become one and this would also hold one now what happens at third time this would become two and it's the same eye it's all three would update to two and two okay and if you know the for loop it in order to verify it's less than three it has to go to three right and then it stops so it would increment one more time even though that's it's not creating new function that the reference I would increment to three right so all three would increment to three because I is an out technically it to say my so to have a better representation I can show this way right so because it's the same I I'm getting I'm getting the disclosure because the value changes it updates the clothes right and let's see if I don't want to use let and I want to keep it as war how do I fix this okay I want to fix it I can actually wrap the entire thing with another function and then immediately run it so I can use immediately invoked function expression so now if I run it I would get 0 1 2 3 and the reason this works is if I wrap this into and immediately if I make this immediately invoked function expression it kind of kind of creates a block scope because it runs right away and I hope you have learned something new today and if you have then please like don't forget to Like subscribe and provide a nice comment and you can help the channel be a patreon I'll provide a link here and you can also translate this video to your native language so that people in your country can also learn it's very easy actually I'll provide a link in the description and thank you

Channel: techsith

Views: 183,824

Keywords: closures, javaScript closures, closure in javascript, tutorial, programming tutorial, lession, web developement, front-end programming

Id: -xqJo5VRP4A

Length: 16min 39sec (999 seconds)

Published: Mon Apr 16 2018

Reddit Comments

[u/ramabhai]

What is the difference between block and a closure?

[u/HealyUnit]

I'm a simple dude; I see Techsith, I upvote. Another good vid as always