Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
JavaScript provides separate "scopes" for each function. Any variables created within a function are not accessible outside the function, and cannot interact variables created in another function.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
As you create larger,
more complex programs,
0:00
you'll likely end up
writing multiple functions.
0:02
You might also start using
JavaScript libraries or
0:05
utility functions that other developers
wrote in your websites and apps.
0:08
So it's possible, even likely that
within a function is a variable that
0:12
uses the same name as a variable
used elsewhere in your script.
0:17
For example, you might write a script
with a variable named "width", but
0:21
also have a function called `computeArea`
that has a "width" variable inside it.
0:25
Two different variables
with the same name,
0:29
what does JavaScript do in this case?
0:32
Fortunately, JavaScript provides separate
scopes for each function, that is,
0:34
each function acts like its own
individual universe, if you will.
0:39
And the variables that are created within
that self contained universe don't
0:43
interact with the variables created in
another universe, or another function.
0:47
Let's look at an example.
0:51
Open the file scope.js and update the
script tag and index.html to point to it.
0:53
scope.js contains a small
function named greeting.
1:03
This function uses the value
of the `person` variable to open
1:06
an alert dialog displaying a greeting and
a name.
1:11
Now, outside of the function I'll declare
a available also called person and
1:14
install a different string in it,
this time, 'Lee'.
1:19
When you call the greeting function,
1:25
the JavaScript engine jumps into the
function, sets the person variable to 'Meg',
1:28
then opens the alert dialog,
displaying the message "Hi, Meg!".
1:33
But what happened to the person variable
declared earlier in the program,
1:37
the person variable with the value of Lee?
1:41
If I add another alert method
outside the function and
1:44
pass it the same "Hi" message
with the person variable,
1:47
Notice how now we get one
alert that displays "Hi, Meg!",
1:53
and another that displays "Hi, Lee!".
1:58
And if I call the greeting function
one more time, just below this alert,
2:01
we get the strings, "Hi, Meg!",
"Hi, Lee!", and "Hi, Meg!".
2:07
In the script there are two variables
named person each has a different value.
2:15
Each variable is declared within
a different context or scope.
2:19
And programming scope is the context
in which values are visible or
2:23
can be referenced.
2:28
Earlier, I mentioned that each function
acts like its own individual universe and
2:29
any variables created within that self
contained universe cannot interact with
2:34
variables created outside of that so
called universe.
2:38
When you declare a variable
inside a function for example,
2:41
you can only use the variable
within that function.
2:45
In this case, there's the scope
of the greeting function.
2:49
The person variable declared inside the
function, lives inside this function only.
2:53
You can't access or
change the variable outside the function.
2:57
This also means that functions do not
have access to each other's scopes.
3:01
To better demonstrate, I'll create
a second function by copying the greeting
3:05
function, pasting a new function below it,
and changing the name to greeting2.
3:10
This time I'll set the value of
the person variable to "Robert",
3:15
and the alert message to "Good morning".
3:23
I'll change this function
call to greeting2. Over
3:28
in the browser,
I get the alerts displaying "Hi,
3:33
Meg!", "Hi, Lee!", and "Good morning, Robert!".
3:38
Function scope is one of the ways
JavaScript protects variables from
3:43
overriding each other.
3:46
There's also a scope
outside of a function.
3:52
It's called the global scope, and
3:54
it's the scope where the other
person variable lives.
3:56
Any variables you create that are not
contained inside a function are accessible
3:59
in this larger universe
called the global scope.
4:04
In our script,
wherever we call the greeting function,
4:07
we're accessing the person variable
that lives inside the function.
4:10
So the alert displays "Hi, Meg!".
4:14
However, the alert method outside the
function references the person variable in
4:16
the global scope which is set to Lee.
4:21
The reason I mentioned that the global
scope is a larger universe,
4:23
is because functions can
access the global scope.
4:27
In other words, you can change
the value of a variable that's
4:30
defined in the global scope
from inside a function.
4:34
This is usually not recommended,
but I'll show you an example.
4:37
If I removed the let keyword
inside the greeting function,
4:40
the program changes dramatically.
4:43
Without a let, or even a const keyword,
the function now reaches out
4:45
into the global scope to access
a variable name to person.
4:50
Once it accesses the variable,
it changes or reassigns its value to Meg.
4:54
Now, the person variable in the global
scope contains the string Meg,
5:00
the Lee value's gone forever.
5:04
Notice in the browser how all
three alerts display "Hi, Meg!".
5:06
As you learned in an earlier course,
5:13
a const keyword protects the variable
from being changed to a different value.
5:15
So one safeguard to prevent this from
happening is to declare global variables
5:19
that shouldn't change
with the const keyword.
5:23
Now, the script does not run, and
the console outputs a type error and
5:26
instead, it says assignment to
constant variable, on line 6.
5:31
It's generally not recommended to access
global variables from inside your
5:35
functions.
5:39
It makes keeping track of variables and
debugging difficult.
5:40
Also, one of the main benefits of
functions is that they are self contained
5:43
blocks of reusable functionality.
5:48
So making a function dependent on global
variables that live in other parts
5:50
of a script can make
the function harder to reuse and
5:54
more likely to produce
unexpected behavior.
5:57
So it's acceptable to use the same
variable name inside of different
5:59
functions as long as you use the let or
const keyword to declare the variable.
6:03
The variable will only
exist inside that function.
6:08
You might be wondering why not just use
different variable names everywhere and
6:19
avoid any issues in the first place?
6:23
Well, you always want to make sure
your variable names are meaningful and
6:25
accurate for
the context in which they live.
6:29
Because of the way scope works, you don't
need to worry about using the same names,
6:32
as long as they live in
separate functions or scopes.
6:36
And sometimes, you might not have
a choice for variable names.
6:39
For example,
if you're using a JavaScript library or
6:42
helpful utility functions
that other developers wrote,
6:44
you might run into variables with the same
name, and you don't want to change those
6:47
because the library expects
those exact variable names.
6:51
However, because those variables
live within different scopes,
6:54
they won't collide with any
variables you might create.
6:58
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up