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