Preview
Video Player
00:00
00:00
The Problem with Globals
4:13Global variables can cause JavaScript developers a lot of trouble. This video will introduce you to a common issue that can result when a variable is declared and used on the global scope.
[MUSIC]
0:00
Hello there, Andrew here.
0:04
JavaScript developer, lifelong learner and
teacher here at Treehouse.
0:06
In this workshop, we're going to be
talking about closures in JavaScript.
0:10
Knowing about closures can help
you be a better developer.
0:14
And they can even help you in job
interviews, where they often come up.
0:18
To understand what closures are,
let's start looking about a problem
0:22
associated with the global
scope in JavaScript.
0:26
To follow along with me,
launch the workspace with this video or
0:29
download the project files.
0:33
Here we have a very simple HTML page,
which displays nothing, but
0:36
it loads a JavaScript file app.js.
0:40
Looking at the JavaScript
file our script declares
0:44
a variable count,
setting it to equal to 0.
0:49
Below that,
we have a function count birds,
0:53
that increments and logs out the count.
0:56
Let's preview the page.
1:01
Open up the developer tools,
1:05
and head over to the JavaScript
console to start logging birds.
1:07
Call in the function a few times.
1:17
This program appears to work as expected.
1:19
It counts the number of birds.
1:22
What if we also wanted to count
something else, dogs perhaps?
1:24
Let's copy and paste this function and
1:29
change this to count dogs and
1:35
we'll change what it logs out to, dogs.
1:39
Hit Save, refresh the page.
1:47
Let's try out our new function, countDogs.
1:51
Great, we're counting dogs just fine.
1:59
Let's make sure countBirds still works.
2:02
Uh-oh.
2:04
It's not starting at one
the way we thought it would.
2:07
But if we count birds a couple more times,
we see it is counting up.
2:10
If we count dogs again,
we'll see what's happening.
2:16
Our two functions are sharing the counts
variable in the global scope.
2:19
Global variables can be
a real problem in JavaScript.
2:28
When two functions depend on a global
variable of the same name but
2:32
they don't intend to, a bug in
the JavaScript program is introduced.
2:36
In our example, countBirds and countDogs
2:41
are unwittingly sharing the count
variable, causing the count variable to be
2:46
incremented every time either one
of the functions is executed.
2:52
Having the count increment
with either function call
2:58
is a serious bug in our application.
3:01
As JavaScript programs get more
complex with multiple people and
3:04
files being included, the problem
of a global variable being used
3:07
in more than one place is more
likely to happen breaking your code,
3:12
especially if you import
a library written by someone else.
3:17
So, how can we maintain separate
states for our two counters?
3:21
We could create two variables,
one called dogCount.
3:26
And the other called birdCount.
3:36
Using separate counts of variables might
make sense for this simple example.
3:43
But what if we wanted to count hundreds or
thousands of things?
3:48
Can you imagine having to create
a different counter variable for
3:53
each function?
3:56
Each one would need to be unique and
couldn't be used elsewhere.
3:58
Closures can help solve these problems.
4:02
In the next video, I'll explain
what they are, how they work and
4:04
I'll show you how they can help
us solve this counter problem.
4:09