WEBVTT

00:00:00.764 --> 00:00:03.070
Now that you've mastered
the basics of functions,

00:00:03.070 --> 00:00:07.396
I want to talk about a topic
that can get a little tricky:

00:00:07.396 --> 00:00:10.984
the difference between
local and global variables.

00:00:11.374 --> 00:00:14.179
These terms may not
mean anything to you now.

00:00:14.179 --> 00:00:16.364
So let's start with an example.

00:00:16.364 --> 00:00:18.110
I made this program here to show you

00:00:18.110 --> 00:00:20.346
how many inches I grew in my childhood.

00:00:20.506 --> 00:00:22.087
Since humans grow at different rates,

00:00:22.087 --> 00:00:24.458
I came up with this function, calcInches,

00:00:24.458 --> 00:00:27.264
where I can pass in
a startAge and an endAge,

00:00:27.264 --> 00:00:29.160
and an inchesPerYear,

00:00:29.700 --> 00:00:32.407
and then it would calculate
how many inches total

00:00:32.407 --> 00:00:34.294
were grown during that time.

00:00:34.874 --> 00:00:36.932
. . . and return it back
to whoever called it.

00:00:37.362 --> 00:00:40.093
So you can see here from 0 to 8 years

00:00:40.093 --> 00:00:44.354
I call calcInches
and I pass 0, 8, and 2.5,

00:00:44.354 --> 00:00:47.717
because I grew about 2.5 inches per year.

00:00:48.297 --> 00:00:51.904
And so it does a calculation,
and you can see it spits out 20.

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

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

00:01:01.913 --> 00:01:05.312
So this is neat, but now I
want to actually display

00:01:05.312 --> 00:01:08.071
how many inches I grew, total,
in my whole childhood.

00:01:08.771 --> 00:01:13.599
So how do I do that? Well, I
might start by looking at my code

00:01:13.599 --> 00:01:16.697
and thinking, "Hmm, what values
do I have here?"

00:01:17.045 --> 00:01:19.922
Do I have anything that looks
like it represents total inches?

00:01:20.582 --> 00:01:26.038
Well, I do have this totalInches variable
inside my calcInches function,

00:01:26.038 --> 00:01:30.560
so I could just output that,
see what it says; start there.

00:01:30.560 --> 00:01:36.440
So let's say text(totalInches, 10, 200),
and put it down at the bottom.

00:01:36.440 --> 00:01:38.455
All right, let's see, what have we got?

00:01:38.455 --> 00:01:40.942
Oh, o-oh, we've got the 'Oh noes!' guy.

00:01:40.942 --> 00:01:42.939
And he says there's a problem.

00:01:42.939 --> 00:01:45.556
totalInches is not defined.

00:01:45.556 --> 00:01:47.624
Well, that's weird, because we

00:01:47.624 --> 00:01:51.622
defined totalInches right here, right?
var totalInches =.

00:01:51.622 --> 00:01:54.423
Well, the problem is that we declared

00:01:54.423 --> 00:01:59.114
totalInches inside a function.
On this line here.

00:01:59.114 --> 00:02:01.854
And when we declare a variable
inside a function,

00:02:01.854 --> 00:02:04.314
it's considered a local variable.

00:02:05.234 --> 00:02:09.076
It lives only inside
this function here (calcInches).

00:02:09.076 --> 00:02:12.945
And the code outside the function,
all of this, it doesn't see

00:02:12.945 --> 00:02:15.794
local variables inside functions.

00:02:15.794 --> 00:02:18.194
It only sees whatever gets returned.

00:02:18.194 --> 00:02:21.224
It only sees that value,
not that variable.

00:02:21.224 --> 00:02:24.767
So when we try to use totalInches
outside the function,

00:02:24.767 --> 00:02:26.250
it doesn't know what it is,

00:02:26.250 --> 00:02:28.596
and it says 'Hey, I've never
seen this variable before.

00:02:28.596 --> 00:02:31.072
It's not defined. I can't display it.'

00:02:32.202 --> 00:02:34.610
So there is a way that we can make it

00:02:34.610 --> 00:02:37.198
so that the outside code
can see this variable.

00:02:37.398 --> 00:02:42.487
And that's if we turn it from
a local variable into a global variable.

00:02:42.736 --> 00:02:46.879
We can do that by moving the definition
outside of the function,

00:02:47.539 --> 00:02:50.042
into what's called the global scope.

00:02:51.252 --> 00:02:54.322
And now, inside the function,
all we're doing

00:02:54.322 --> 00:02:58.342
is changing the value of it each time,
not defining and declaring it.

00:02:58.632 --> 00:03:02.484
So you can see that it says
'Total grown over life: 16'

00:03:02.756 --> 00:03:06.158
So it found the variable because
we made it into a global variable.

00:03:06.648 --> 00:03:09.515
But it's not actually the value
that we're looking for.

00:03:09.625 --> 00:03:11.552
That's just the most recent value.

00:03:11.552 --> 00:03:13.938
And that's because every time
we call this function,

00:03:13.938 --> 00:03:17.794
it's setting totalInches to whatever it's
calculating that time. Right?

00:03:18.714 --> 00:03:21.930
So what we really want to do is,
we want a new variable

00:03:21.930 --> 00:03:24.662
that we use only
for storing the overall total

00:03:24.662 --> 00:03:28.464
that we add to every time we calculate,
you know, the total for a range,

00:03:29.228 --> 00:03:32.563
So let's change this back
to being a local variable,

00:03:33.663 --> 00:03:37.628
and let's make a new global variable
called lifeInches,

00:03:38.168 --> 00:03:40.034
and we'll start it at zero.

00:03:40.634 --> 00:03:45.381
And then inside the function,
we'll add to this global variable

00:03:45.381 --> 00:03:49.478
by saying lifeInches += totalInches.

00:03:49.478 --> 00:03:51.586
So we're going to add
however much we calculate

00:03:51.586 --> 00:03:52.954
each time we call this function,

00:03:52.954 --> 00:03:56.403
we're going to add it
to the lifeInches global variable.

00:03:56.403 --> 00:03:58.121
And then at the bottom,

00:03:58.121 --> 00:04:00.459
we'll display lifeInches:
text(lifeInches, 10, 200).

00:04:00.459 --> 00:04:02.998
Tada! our total growth over life.

00:04:03.538 --> 00:04:06.431
Now that's not actually how tall I am.
I'm taller than that.

00:04:06.431 --> 00:04:07.595
But that's because you know,

00:04:07.595 --> 00:04:10.839
we start off born with more than 0 length.

00:04:10.839 --> 00:04:13.984
So if I want total,
maybe I could start at 20.

00:04:14.284 --> 00:04:17.265
And there you go, that's how tall I am.

00:04:17.265 --> 00:04:20.036
All right. So let's review, totalInches

00:04:20.036 --> 00:04:22.157
is what we call a local variable.

00:04:22.157 --> 00:04:24.454
And we know that because
we see the declaration of it

00:04:24.454 --> 00:04:27.491
inside this function
and not outside the function.

00:04:28.521 --> 00:04:30.822
And so that means that
this outside code here

00:04:30.822 --> 00:04:34.373
doesn't know about this variable
called totalInches.

00:04:34.813 --> 00:04:37.656
Now lifeInches is what we
call a global variable.

00:04:37.656 --> 00:04:39.501
And we know that because
we see its declaration

00:04:39.501 --> 00:04:42.726
outside of any function
in our global scope.

00:04:43.586 --> 00:04:45.070
So try to keep this in mind when

00:04:45.070 --> 00:04:47.158
you're writing your functions
and your variables.

00:04:47.158 --> 00:04:48.834
And think to yourself whether you want

00:04:48.834 --> 00:04:51.310
a local variable
for just your function to use,

00:04:51.310 --> 00:04:54.646
or a global variable
for your whole program to use.

00:04:54.646 --> 00:04:57.354
And don't worry if this is hard
to wrap your head around.

00:04:57.354 --> 00:04:59.927
It's one of the trickiest
concepts in programming,

00:04:59.927 --> 00:05:01.730
and in JavaScript in particular.

00:05:01.730 --> 00:05:04.734
And it's something you'll get better at
as you keep practicing.