Well done!

You have completed Understanding Closures in JavaScript!

Preview

The Problem with Globals

4:13 with Andrew Chalkley and Joel Kraft

Global 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.

This video doesn't have any notes.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

[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

You need to sign up for Treehouse in order to download course files.

You need to sign up for Treehouse in order to set up Workspace