Preview
Video Player
00:00
00:00
What are Closures?
3:55The closure is a powerful and useful concept in JavaScript. In this video you'll learn how to create a closure.
A closure is a function with its
own private store of variables
0:00
that no other function knows about
or can access.
0:05
You can create any number of closures.
0:09
even with the same variable name
contained within each one of them.
0:12
That's because the variables
are hidden from all other functions.
0:16
Let's walk through the steps
of creating a closure now.
0:21
Open up the workspace with
this video to follow along.
0:25
Here's a simple function, doghouse.
0:28
Like any function in JavaScript,
0:33
doghouse can see variables declared
outside of itself In the global scope
0:35
As well as any variables declared
inside in the local scope.
0:46
However variables inside
functions are not visible outside.
0:58
If we log birds and dogs within
the function we can read both variables.
1:09
But logging them outside the function,
we see that dogs isn't defined.
1:15
Using the local scope that functions
provide is what we can use to create
1:26
closures.
1:31
You may not know this, but you can declare
a function inside another function.
1:33
Let's use two functions together,
declaring a function called showDogs.
1:38
Within our dog house function.
1:47
The showDogs function is
called an inner function
1:52
because it's inside another function.
1:56
The dog house function is
called an outer function.
1:59
All variables within the outer
function are visible to
2:07
the inner function, even though they
are hidden from the global scope.
2:11
Just like the outer function has
access to the global variables,
2:17
the inner function has access
to the outer function scope.
2:22
Right now the dogs variable is
declared in the outer function and
2:28
the inner function has access to it.
2:33
If the inner function is
returned [BLANK-AUDIO] And
2:36
is assigned to a variable [BLANK-AUDIO]
2:44
The private scope of the outer
function lives on and
2:50
remains in the program's memory.
2:58
In other words we can call
the returned inner function and
3:03
get access or
even modify any private variables.
3:08
A closure looks like this,
an outer function,
3:14
some private variables within
the outer function scope, an inner
3:20
function that could modify or log out,
3:25
any of the private variables, and
finally the inner function is returned.
3:30
Every time the outer function is called
a new private scope is created and
3:37
the inner function returned can read and
3:41
modify any private variables for
this new private scope.
3:44
This new scope is separate
from any closures
3:49
the outer function has created previously.
3:52