1
00:00:00,764 --> 00:00:03,070
Now that you've mastered
the basics of functions,

2
00:00:03,070 --> 00:00:07,396
I want to talk about a topic
that can get a little tricky:

3
00:00:07,396 --> 00:00:10,984
the difference between
local and global variables.

4
00:00:11,374 --> 00:00:14,179
These terms may not
mean anything to you now.

5
00:00:14,179 --> 00:00:16,364
So let's start with an example.

6
00:00:16,364 --> 00:00:18,110
I made this program here to show you

7
00:00:18,110 --> 00:00:20,346
how many inches I grew in my childhood.

8
00:00:20,506 --> 00:00:22,087
Since humans grow at different rates,

9
00:00:22,087 --> 00:00:24,458
I came up with this function, calcInches,

10
00:00:24,458 --> 00:00:27,264
where I can pass in
a startAge and an endAge,

11
00:00:27,264 --> 00:00:29,160
and an inchesPerYear,

12
00:00:29,700 --> 00:00:32,407
and then it would calculate
how many inches total

13
00:00:32,407 --> 00:00:34,294
were grown during that time.

14
00:00:34,874 --> 00:00:36,932
. . . and return it back
to whoever called it.

15
00:00:37,362 --> 00:00:40,093
So you can see here from 0 to 8 years

16
00:00:40,093 --> 00:00:44,354
I call calcInches
and I pass 0, 8, and 2.5,

17
00:00:44,354 --> 00:00:47,717
because I grew about 2.5 inches per year.

18
00:00:48,297 --> 00:00:51,904
And so it does a calculation,
and you can see it spits out 20.

19
00:00:52,171 --> 00:00:57,939
Then from 8 to 16, I call it from,
and I pass it 8 and 16 and then 2

20
00:00:57,939 --> 00:01:01,133
because I didn't quite grow as much,
and you can see it spits out 16.

21
00:01:01,913 --> 00:01:05,312
So this is neat, but now I
want to actually display

22
00:01:05,312 --> 00:01:08,071
how many inches I grew, total,
in my whole childhood.

23
00:01:08,771 --> 00:01:13,599
So how do I do that? Well, I
might start by looking at my code

24
00:01:13,599 --> 00:01:16,697
and thinking, "Hmm, what values
do I have here?"

25
00:01:17,045 --> 00:01:19,922
Do I have anything that looks
like it represents total inches?

26
00:01:20,582 --> 00:01:26,038
Well, I do have this totalInches variable
inside my calcInches function,

27
00:01:26,038 --> 00:01:30,560
so I could just output that,
see what it says; start there.

28
00:01:30,560 --> 00:01:36,440
So let's say text(totalInches, 10, 200),
and put it down at the bottom.

29
00:01:36,440 --> 00:01:38,455
All right, let's see, what have we got?

30
00:01:38,455 --> 00:01:40,942
Oh, o-oh, we've got the 'Oh noes!' guy.

31
00:01:40,942 --> 00:01:42,939
And he says there's a problem.

32
00:01:42,939 --> 00:01:45,556
totalInches is not defined.

33
00:01:45,556 --> 00:01:47,624
Well, that's weird, because we

34
00:01:47,624 --> 00:01:51,622
defined totalInches right here, right?
var totalInches =.

35
00:01:51,622 --> 00:01:54,423
Well, the problem is that we declared

36
00:01:54,423 --> 00:01:59,114
totalInches inside a function.
On this line here.

37
00:01:59,114 --> 00:02:01,854
And when we declare a variable
inside a function,

38
00:02:01,854 --> 00:02:04,314
it's considered a local variable.

39
00:02:05,234 --> 00:02:09,076
It lives only inside
this function here (calcInches).

40
00:02:09,076 --> 00:02:12,945
And the code outside the function,
all of this, it doesn't see

41
00:02:12,945 --> 00:02:15,794
local variables inside functions.

42
00:02:15,794 --> 00:02:18,194
It only sees whatever gets returned.

43
00:02:18,194 --> 00:02:21,224
It only sees that value,
not that variable.

44
00:02:21,224 --> 00:02:24,767
So when we try to use totalInches
outside the function,

45
00:02:24,767 --> 00:02:26,250
it doesn't know what it is,

46
00:02:26,250 --> 00:02:28,596
and it says 'Hey, I've never
seen this variable before.

47
00:02:28,596 --> 00:02:31,072
It's not defined. I can't display it.'

48
00:02:32,202 --> 00:02:34,610
So there is a way that we can make it

49
00:02:34,610 --> 00:02:37,198
so that the outside code
can see this variable.

50
00:02:37,398 --> 00:02:42,487
And that's if we turn it from
a local variable into a global variable.

51
00:02:42,736 --> 00:02:46,879
We can do that by moving the definition
outside of the function,

52
00:02:47,539 --> 00:02:50,042
into what's called the global scope.

53
00:02:51,252 --> 00:02:54,322
And now, inside the function,
all we're doing

54
00:02:54,322 --> 00:02:58,342
is changing the value of it each time,
not defining and declaring it.

55
00:02:58,632 --> 00:03:02,484
So you can see that it says
'Total grown over life: 16'

56
00:03:02,756 --> 00:03:06,158
So it found the variable because
we made it into a global variable.

57
00:03:06,648 --> 00:03:09,515
But it's not actually the value
that we're looking for.

58
00:03:09,625 --> 00:03:11,552
That's just the most recent value.

59
00:03:11,552 --> 00:03:13,938
And that's because every time
we call this function,

60
00:03:13,938 --> 00:03:17,794
it's setting totalInches to whatever it's
calculating that time. Right?

61
00:03:18,714 --> 00:03:21,930
So what we really want to do is,
we want a new variable

62
00:03:21,930 --> 00:03:24,662
that we use only
for storing the overall total

63
00:03:24,662 --> 00:03:28,464
that we add to every time we calculate,
you know, the total for a range,

64
00:03:29,228 --> 00:03:32,563
So let's change this back
to being a local variable,

65
00:03:33,663 --> 00:03:37,628
and let's make a new global variable
called lifeInches,

66
00:03:38,168 --> 00:03:40,034
and we'll start it at zero.

67
00:03:40,634 --> 00:03:45,381
And then inside the function,
we'll add to this global variable

68
00:03:45,381 --> 00:03:49,478
by saying lifeInches += totalInches.

69
00:03:49,478 --> 00:03:51,586
So we're going to add
however much we calculate

70
00:03:51,586 --> 00:03:52,954
each time we call this function,

71
00:03:52,954 --> 00:03:56,403
we're going to add it
to the lifeInches global variable.

72
00:03:56,403 --> 00:03:58,121
And then at the bottom,

73
00:03:58,121 --> 00:04:00,459
we'll display lifeInches:
text(lifeInches, 10, 200).

74
00:04:00,459 --> 00:04:02,998
Tada! our total growth over life.

75
00:04:03,538 --> 00:04:06,431
Now that's not actually how tall I am.
I'm taller than that.

76
00:04:06,431 --> 00:04:07,595
But that's because you know,

77
00:04:07,595 --> 00:04:10,839
we start off born with more than 0 length.

78
00:04:10,839 --> 00:04:13,984
So if I want total,
maybe I could start at 20.

79
00:04:14,284 --> 00:04:17,265
And there you go, that's how tall I am.

80
00:04:17,265 --> 00:04:20,036
All right. So let's review, totalInches

81
00:04:20,036 --> 00:04:22,157
is what we call a local variable.

82
00:04:22,157 --> 00:04:24,454
And we know that because
we see the declaration of it

83
00:04:24,454 --> 00:04:27,491
inside this function
and not outside the function.

84
00:04:28,521 --> 00:04:30,822
And so that means that
this outside code here

85
00:04:30,822 --> 00:04:34,373
doesn't know about this variable
called totalInches.

86
00:04:34,813 --> 00:04:37,656
Now lifeInches is what we
call a global variable.

87
00:04:37,656 --> 00:04:39,501
And we know that because
we see its declaration

88
00:04:39,501 --> 00:04:42,726
outside of any function
in our global scope.

89
00:04:43,586 --> 00:04:45,070
So try to keep this in mind when

90
00:04:45,070 --> 00:04:47,158
you're writing your functions
and your variables.

91
00:04:47,158 --> 00:04:48,834
And think to yourself whether you want

92
00:04:48,834 --> 00:04:51,310
a local variable
for just your function to use,

93
00:04:51,310 --> 00:04:54,646
or a global variable
for your whole program to use.

94
00:04:54,646 --> 00:04:57,354
And don't worry if this is hard
to wrap your head around.

95
00:04:57,354 --> 00:04:59,927
It's one of the trickiest
concepts in programming,

96
00:04:59,927 --> 00:05:01,730
and in JavaScript in particular.

97
00:05:01,730 --> 00:05:04,734
And it's something you'll get better at
as you keep practicing.