1
00:00:00,304 --> 00:00:02,864
As you create larger,
more complex programs,

2
00:00:02,864 --> 00:00:05,681
you'll likely end up
writing multiple functions.

3
00:00:05,681 --> 00:00:08,448
You might also start using
JavaScript libraries or

4
00:00:08,448 --> 00:00:12,512
utility functions that other developers
wrote in your websites and apps.

5
00:00:12,512 --> 00:00:17,177
So it's possible, even likely that
within a function is a variable that

6
00:00:17,177 --> 00:00:21,234
uses the same name as a variable
used elsewhere in your script.

7
00:00:21,234 --> 00:00:25,274
For example, you might write a script
with a variable named "width", but

8
00:00:25,274 --> 00:00:29,665
also have a function called `computeArea`
that has a "width" variable inside it.

9
00:00:29,665 --> 00:00:32,213
Two different variables
with the same name,

10
00:00:32,213 --> 00:00:34,366
what does JavaScript do in this case?

11
00:00:34,366 --> 00:00:39,248
Fortunately, JavaScript provides separate
scopes for each function, that is,

12
00:00:39,248 --> 00:00:43,238
each function acts like its own
individual universe, if you will.

13
00:00:43,238 --> 00:00:47,066
And the variables that are created within
that self contained universe don't

14
00:00:47,066 --> 00:00:51,080
interact with the variables created in
another universe, or another function.

15
00:00:51,080 --> 00:00:53,174
Let's look at an example.

16
00:00:53,174 --> 00:00:58,479
Open the file scope.js and update the
script tag and index.html to point to it.

17
00:01:03,165 --> 00:01:06,651
scope.js contains a small
function named greeting.

18
00:01:06,651 --> 00:01:11,070
This function uses the value
of the `person` variable to open

19
00:01:11,070 --> 00:01:14,869
an alert dialog displaying a greeting and
a name.

20
00:01:14,869 --> 00:01:19,650
Now, outside of the function I'll declare
a available also called person and

21
00:01:19,650 --> 00:01:22,845
install a different string in it,
this time, 'Lee'.

22
00:01:25,799 --> 00:01:28,192
When you call the greeting function,

23
00:01:28,192 --> 00:01:33,351
the JavaScript engine jumps into the
function, sets the person variable to 'Meg',

24
00:01:33,351 --> 00:01:37,555
then opens the alert dialog,
displaying the message "Hi, Meg!".

25
00:01:37,555 --> 00:01:41,839
But what happened to the person variable
declared earlier in the program,

26
00:01:41,839 --> 00:01:44,299
the person variable with the value of Lee?

27
00:01:44,299 --> 00:01:47,709
If I add another alert method
outside the function and

28
00:01:47,709 --> 00:01:51,135
pass it the same "Hi" message
with the person variable,

29
00:01:53,906 --> 00:01:58,375
Notice how now we get one
alert that displays "Hi, Meg!",

30
00:01:58,375 --> 00:02:01,464
and another that displays "Hi, Lee!".

31
00:02:01,464 --> 00:02:07,790
And if I call the greeting function
one more time, just below this alert,

32
00:02:07,790 --> 00:02:12,602
we get the strings, "Hi, Meg!",
"Hi, Lee!", and "Hi, Meg!".

33
00:02:15,516 --> 00:02:19,896
In the script there are two variables
named person each has a different value.

34
00:02:19,896 --> 00:02:23,702
Each variable is declared within
a different context or scope.

35
00:02:23,702 --> 00:02:28,058
And programming scope is the context
in which values are visible or

36
00:02:28,058 --> 00:02:29,392
can be referenced.

37
00:02:29,392 --> 00:02:34,156
Earlier, I mentioned that each function
acts like its own individual universe and

38
00:02:34,156 --> 00:02:38,784
any variables created within that self
contained universe cannot interact with

39
00:02:38,784 --> 00:02:41,997
variables created outside of that so
called universe.

40
00:02:41,997 --> 00:02:45,769
When you declare a variable
inside a function for example,

41
00:02:45,769 --> 00:02:49,097
you can only use the variable
within that function.

42
00:02:49,097 --> 00:02:53,109
In this case, there's the scope
of the greeting function.

43
00:02:53,109 --> 00:02:57,590
The person variable declared inside the
function, lives inside this function only.

44
00:02:57,590 --> 00:03:01,064
You can't access or
change the variable outside the function.

45
00:03:01,064 --> 00:03:05,538
This also means that functions do not
have access to each other's scopes.

46
00:03:05,538 --> 00:03:10,580
To better demonstrate, I'll create
a second function by copying the greeting

47
00:03:10,580 --> 00:03:15,859
function, pasting a new function below it,
and changing the name to greeting2.

48
00:03:15,859 --> 00:03:23,780
This time I'll set the value of
the person variable to "Robert",

49
00:03:23,780 --> 00:03:28,723
and the alert message to "Good morning".

50
00:03:28,723 --> 00:03:33,673
I'll change this function
call to greeting2. Over

51
00:03:33,673 --> 00:03:38,392
in the browser,
I get the alerts displaying "Hi,

52
00:03:38,392 --> 00:03:43,474
Meg!", "Hi, Lee!", and "Good morning, Robert!".

53
00:03:43,474 --> 00:03:46,765
Function scope is one of the ways
JavaScript protects variables from

54
00:03:46,765 --> 00:03:47,963
overriding each other.

55
00:03:52,262 --> 00:03:54,697
There's also a scope
outside of a function.

56
00:03:54,697 --> 00:03:56,595
It's called the global scope, and

57
00:03:56,595 --> 00:03:59,578
it's the scope where the other
person variable lives.

58
00:03:59,578 --> 00:04:04,325
Any variables you create that are not
contained inside a function are accessible

59
00:04:04,325 --> 00:04:07,267
in this larger universe
called the global scope.

60
00:04:07,267 --> 00:04:10,272
In our script,
wherever we call the greeting function,

61
00:04:10,272 --> 00:04:14,040
we're accessing the person variable
that lives inside the function.

62
00:04:14,040 --> 00:04:16,650
So the alert displays "Hi, Meg!".

63
00:04:16,650 --> 00:04:21,631
However, the alert method outside the
function references the person variable in

64
00:04:21,631 --> 00:04:23,847
the global scope which is set to Lee.

65
00:04:23,847 --> 00:04:27,642
The reason I mentioned that the global
scope is a larger universe,

66
00:04:27,642 --> 00:04:30,568
is because functions can
access the global scope.

67
00:04:30,568 --> 00:04:34,083
In other words, you can change
the value of a variable that's

68
00:04:34,083 --> 00:04:37,064
defined in the global scope
from inside a function.

69
00:04:37,064 --> 00:04:40,419
This is usually not recommended,
but I'll show you an example.

70
00:04:40,419 --> 00:04:43,832
If I removed the let keyword
inside the greeting function,

71
00:04:43,832 --> 00:04:45,957
the program changes dramatically.

72
00:04:45,957 --> 00:04:50,662
Without a let, or even a const keyword,
the function now reaches out

73
00:04:50,662 --> 00:04:54,652
into the global scope to access
a variable name to person.

74
00:04:54,652 --> 00:05:00,206
Once it accesses the variable,
it changes or reassigns its value to Meg.

75
00:05:00,206 --> 00:05:04,386
Now, the person variable in the global
scope contains the string Meg,

76
00:05:04,386 --> 00:05:06,276
the Lee value's gone forever.

77
00:05:06,276 --> 00:05:09,788
Notice in the browser how all
three alerts display "Hi, Meg!".

78
00:05:13,215 --> 00:05:15,115
As you learned in an earlier course,

79
00:05:15,115 --> 00:05:19,240
a const keyword protects the variable
from being changed to a different value.

80
00:05:19,240 --> 00:05:23,895
So one safeguard to prevent this from
happening is to declare global variables

81
00:05:23,895 --> 00:05:26,794
that shouldn't change
with the const keyword.

82
00:05:26,794 --> 00:05:31,435
Now, the script does not run, and
the console outputs a type error and

83
00:05:31,435 --> 00:05:35,853
instead, it says assignment to
constant variable, on line 6.

84
00:05:35,853 --> 00:05:39,883
It's generally not recommended to access
global variables from inside your

85
00:05:39,883 --> 00:05:40,569
functions.

86
00:05:40,569 --> 00:05:43,956
It makes keeping track of variables and
debugging difficult.

87
00:05:43,956 --> 00:05:48,025
Also, one of the main benefits of
functions is that they are self contained

88
00:05:48,025 --> 00:05:50,164
blocks of reusable functionality.

89
00:05:50,164 --> 00:05:54,397
So making a function dependent on global
variables that live in other parts

90
00:05:54,397 --> 00:05:57,284
of a script can make
the function harder to reuse and

91
00:05:57,284 --> 00:05:59,917
more likely to produce
unexpected behavior.

92
00:05:59,917 --> 00:06:03,988
So it's acceptable to use the same
variable name inside of different

93
00:06:03,988 --> 00:06:08,565
functions as long as you use the let or
const keyword to declare the variable.

94
00:06:08,565 --> 00:06:11,265
The variable will only
exist inside that function.

95
00:06:19,483 --> 00:06:23,783
You might be wondering why not just use
different variable names everywhere and

96
00:06:23,783 --> 00:06:25,785
avoid any issues in the first place?

97
00:06:25,785 --> 00:06:29,672
Well, you always want to make sure
your variable names are meaningful and

98
00:06:29,672 --> 00:06:32,063
accurate for
the context in which they live.

99
00:06:32,063 --> 00:06:36,410
Because of the way scope works, you don't
need to worry about using the same names,

100
00:06:36,410 --> 00:06:39,185
as long as they live in
separate functions or scopes.

101
00:06:39,185 --> 00:06:42,063
And sometimes, you might not have
a choice for variable names.

102
00:06:42,063 --> 00:06:44,797
For example,
if you're using a JavaScript library or

103
00:06:44,797 --> 00:06:47,710
helpful utility functions
that other developers wrote,

104
00:06:47,710 --> 00:06:51,811
you might run into variables with the same
name, and you don't want to change those

105
00:06:51,811 --> 00:06:54,739
because the library expects
those exact variable names.

106
00:06:54,739 --> 00:06:58,062
However, because those variables
live within different scopes,

107
00:06:58,062 --> 00:07:00,930
they won't collide with any
variables you might create.