1
00:00:00,025 --> 00:00:04,751
[MUSIC]

2
00:00:04,751 --> 00:00:06,160
Hello there, Andrew here.

3
00:00:06,160 --> 00:00:10,750
JavaScript developer, lifelong learner and
teacher here at Treehouse.

4
00:00:10,750 --> 00:00:14,820
In this workshop, we're going to be
talking about closures in JavaScript.

5
00:00:14,820 --> 00:00:18,010
Knowing about closures can help
you be a better developer.

6
00:00:18,010 --> 00:00:22,810
And they can even help you in job
interviews, where they often come up.

7
00:00:22,810 --> 00:00:26,810
To understand what closures are,
let's start looking about a problem

8
00:00:26,810 --> 00:00:29,960
associated with the global
scope in JavaScript.

9
00:00:29,960 --> 00:00:33,400
To follow along with me,
launch the workspace with this video or

10
00:00:33,400 --> 00:00:34,880
download the project files.

11
00:00:36,110 --> 00:00:40,770
Here we have a very simple HTML page,
which displays nothing, but

12
00:00:40,770 --> 00:00:44,580
it loads a JavaScript file app.js.

13
00:00:44,580 --> 00:00:49,074
Looking at the JavaScript
file our script declares

14
00:00:49,074 --> 00:00:53,053
a variable count,
setting it to equal to 0.

15
00:00:53,053 --> 00:00:56,588
Below that,
we have a function count birds,

16
00:00:56,588 --> 00:00:59,760
that increments and logs out the count.

17
00:01:01,540 --> 00:01:03,090
Let's preview the page.

18
00:01:05,380 --> 00:01:07,445
Open up the developer tools,

19
00:01:07,445 --> 00:01:11,914
and head over to the JavaScript
console to start logging birds.

20
00:01:17,085 --> 00:01:19,580
Call in the function a few times.

21
00:01:19,580 --> 00:01:22,600
This program appears to work as expected.

22
00:01:22,600 --> 00:01:24,900
It counts the number of birds.

23
00:01:24,900 --> 00:01:29,423
What if we also wanted to count
something else, dogs perhaps?

24
00:01:29,423 --> 00:01:35,306
Let's copy and paste this function and

25
00:01:35,306 --> 00:01:39,584
change this to count dogs and

26
00:01:39,584 --> 00:01:45,830
we'll change what it logs out to, dogs.

27
00:01:47,820 --> 00:01:50,790
Hit Save, refresh the page.

28
00:01:51,950 --> 00:01:54,805
Let's try out our new function, countDogs.

29
00:01:59,009 --> 00:02:02,530
Great, we're counting dogs just fine.

30
00:02:02,530 --> 00:02:04,012
Let's make sure countBirds still works.

31
00:02:04,012 --> 00:02:07,120
Uh-oh.

32
00:02:07,120 --> 00:02:10,190
It's not starting at one
the way we thought it would.

33
00:02:10,190 --> 00:02:15,310
But if we count birds a couple more times,
we see it is counting up.

34
00:02:16,480 --> 00:02:19,869
If we count dogs again,
we'll see what's happening.

35
00:02:19,869 --> 00:02:28,590
Our two functions are sharing the counts
variable in the global scope.

36
00:02:28,590 --> 00:02:32,270
Global variables can be
a real problem in JavaScript.

37
00:02:32,270 --> 00:02:36,250
When two functions depend on a global
variable of the same name but

38
00:02:36,250 --> 00:02:40,390
they don't intend to, a bug in
the JavaScript program is introduced.

39
00:02:41,390 --> 00:02:45,730
In our example, countBirds and countDogs

40
00:02:46,770 --> 00:02:52,140
are unwittingly sharing the count
variable, causing the count variable to be

41
00:02:52,140 --> 00:02:58,440
incremented every time either one
of the functions is executed.

42
00:02:58,440 --> 00:03:01,250
Having the count increment
with either function call

43
00:03:01,250 --> 00:03:04,100
is a serious bug in our application.

44
00:03:04,100 --> 00:03:07,680
As JavaScript programs get more
complex with multiple people and

45
00:03:07,680 --> 00:03:12,360
files being included, the problem 
of a global variable being used

46
00:03:12,360 --> 00:03:17,260
in more than one place is more
likely to happen breaking your code,

47
00:03:17,260 --> 00:03:21,210
especially if you import
a library written by someone else.

48
00:03:21,210 --> 00:03:26,500
So, how can we maintain separate
states for our two counters?

49
00:03:26,500 --> 00:03:31,343
We could create two variables,
one called dogCount.

50
00:03:36,363 --> 00:03:38,383
And the other called birdCount.

51
00:03:43,427 --> 00:03:48,500
Using separate counts of variables might
make sense for this simple example.

52
00:03:48,500 --> 00:03:53,470
But what if we wanted to count hundreds or
thousands of things?

53
00:03:53,470 --> 00:03:56,660
Can you imagine having to create
a different counter variable for

54
00:03:56,660 --> 00:03:58,020
each function?

55
00:03:58,020 --> 00:04:02,310
Each one would need to be unique and
couldn't be used elsewhere.

56
00:04:02,310 --> 00:04:04,800
Closures can help solve these problems.

57
00:04:04,800 --> 00:04:09,060
In the next video, I'll explain
what they are, how they work and

58
00:04:09,060 --> 00:04:12,190
I'll show you how they can help
us solve this counter problem.