0:00:00.764,0:00:03.070
Now that you've mastered[br]the basics of functions,

0:00:03.070,0:00:07.396
I want to talk about a topic[br]that can get a little tricky:

0:00:07.396,0:00:10.984
the difference between[br]local and global variables.

0:00:11.374,0:00:14.179
These terms may not[br]mean anything to you now.

0:00:14.179,0:00:16.364
So let's start with an example.

0:00:16.364,0:00:18.110
I made this program here to show you

0:00:18.110,0:00:20.346
how many inches I grew in my childhood.

0:00:20.506,0:00:22.087
Since humans grow at different rates,

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

0:00:24.458,0:00:27.264
where I can pass in[br]a startAge and an endAge,

0:00:27.264,0:00:29.160
and an inchesPerYear,

0:00:29.700,0:00:32.407
and then it would calculate[br]how many inches total

0:00:32.407,0:00:34.294
were grown during that time.

0:00:34.874,0:00:36.932
. . . and return it back[br]to whoever called it.

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

0:00:40.093,0:00:44.354
I call calcInches[br]and I pass 0, 8, and 2.5,

0:00:44.354,0:00:47.717
because I grew about 2.5 inches per year.

0:00:48.297,0:00:51.904
And so it does a calculation,[br]and you can see it spits out 20.

0:00:52.171,0:00:57.939
Then from 8 to 16, I call it from,[br]and I pass it 8 and 16 and then 2

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

0:01:01.913,0:01:05.312
So this is neat, but now I[br]want to actually display

0:01:05.312,0:01:08.071
how many inches I grew, total,[br]in my whole childhood.

0:01:08.771,0:01:13.599
So how do I do that? Well, I[br]might start by looking at my code

0:01:13.599,0:01:16.697
and thinking, "Hmm, what values[br]do I have here?"

0:01:17.045,0:01:19.922
Do I have anything that looks[br]like it represents total inches?

0:01:20.582,0:01:26.038
Well, I do have this totalInches variable[br]inside my calcInches function,

0:01:26.038,0:01:30.560
so I could just output that,[br]see what it says; start there.

0:01:30.560,0:01:36.440
So let's say text(totalInches, 10, 200),[br]and put it down at the bottom.

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

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

0:01:40.942,0:01:42.939
And he says there's a problem.

0:01:42.939,0:01:45.556
totalInches is not defined.

0:01:45.556,0:01:47.624
Well, that's weird, because we

0:01:47.624,0:01:51.622
defined totalInches right here, right?[br]var totalInches =.

0:01:51.622,0:01:54.423
Well, the problem is that we declared

0:01:54.423,0:01:59.114
totalInches inside a function.[br]On this line here.

0:01:59.114,0:02:01.854
And when we declare a variable[br]inside a function,

0:02:01.854,0:02:04.314
it's considered a local variable.

0:02:05.234,0:02:09.076
It lives only inside[br]this function here (calcInches).

0:02:09.076,0:02:12.945
And the code outside the function,[br]all of this, it doesn't see

0:02:12.945,0:02:15.794
local variables inside functions.

0:02:15.794,0:02:18.194
It only sees whatever gets returned.

0:02:18.194,0:02:21.224
It only sees that value,[br]not that variable.

0:02:21.224,0:02:24.767
So when we try to use totalInches[br]outside the function,

0:02:24.767,0:02:26.250
it doesn't know what it is,

0:02:26.250,0:02:28.596
and it says 'Hey, I've never[br]seen this variable before.

0:02:28.596,0:02:31.072
It's not defined. I can't display it.'

0:02:32.202,0:02:34.610
So there is a way that we can make it

0:02:34.610,0:02:37.198
so that the outside code[br]can see this variable.

0:02:37.398,0:02:42.487
And that's if we turn it from[br]a local variable into a global variable.

0:02:42.736,0:02:46.879
We can do that by moving the definition[br]outside of the function,

0:02:47.539,0:02:50.042
into what's called the global scope.

0:02:51.252,0:02:54.322
And now, inside the function,[br]all we're doing

0:02:54.322,0:02:58.342
is changing the value of it each time,[br]not defining and declaring it.

0:02:58.632,0:03:02.484
So you can see that it says[br]'Total grown over life: 16'

0:03:02.756,0:03:06.158
So it found the variable because[br]we made it into a global variable.

0:03:06.648,0:03:09.515
But it's not actually the value[br]that we're looking for.

0:03:09.625,0:03:11.552
That's just the most recent value.

0:03:11.552,0:03:13.938
And that's because every time[br]we call this function,

0:03:13.938,0:03:17.794
it's setting totalInches to whatever it's[br]calculating that time. Right?

0:03:18.714,0:03:21.930
So what we really want to do is,[br]we want a new variable

0:03:21.930,0:03:24.662
that we use only[br]for storing the overall total

0:03:24.662,0:03:28.464
that we add to every time we calculate,[br]you know, the total for a range,

0:03:29.228,0:03:32.563
So let's change this back[br]to being a local variable,

0:03:33.663,0:03:37.628
and let's make a new global variable[br]called lifeInches,

0:03:38.168,0:03:40.034
and we'll start it at zero.

0:03:40.634,0:03:45.381
And then inside the function,[br]we'll add to this global variable

0:03:45.381,0:03:49.478
by saying lifeInches += totalInches.

0:03:49.478,0:03:51.586
So we're going to add[br]however much we calculate

0:03:51.586,0:03:52.954
each time we call this function,

0:03:52.954,0:03:56.403
we're going to add it[br]to the lifeInches global variable.

0:03:56.403,0:03:58.121
And then at the bottom,

0:03:58.121,0:04:00.459
we'll display lifeInches:[br]text(lifeInches, 10, 200).

0:04:00.459,0:04:02.998
Tada! our total growth over life.

0:04:03.538,0:04:06.431
Now that's not actually how tall I am.[br]I'm taller than that.

0:04:06.431,0:04:07.595
But that's because you know,

0:04:07.595,0:04:10.839
we start off born with more than 0 length.

0:04:10.839,0:04:13.984
So if I want total,[br]maybe I could start at 20.

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

0:04:17.265,0:04:20.036
All right. So let's review, totalInches

0:04:20.036,0:04:22.157
is what we call a local variable.

0:04:22.157,0:04:24.454
And we know that because[br]we see the declaration of it

0:04:24.454,0:04:27.491
inside this function[br]and not outside the function.

0:04:28.521,0:04:30.822
And so that means that[br]this outside code here

0:04:30.822,0:04:34.373
doesn't know about this variable[br]called totalInches.

0:04:34.813,0:04:37.656
Now lifeInches is what we[br]call a global variable.

0:04:37.656,0:04:39.501
And we know that because[br]we see its declaration

0:04:39.501,0:04:42.726
outside of any function[br]in our global scope.

0:04:43.586,0:04:45.070
So try to keep this in mind when

0:04:45.070,0:04:47.158
you're writing your functions[br]and your variables.

0:04:47.158,0:04:48.834
And think to yourself whether you want

0:04:48.834,0:04:51.310
a local variable[br]for just your function to use,

0:04:51.310,0:04:54.646
or a global variable[br]for your whole program to use.

0:04:54.646,0:04:57.354
And don't worry if this is hard[br]to wrap your head around.

0:04:57.354,0:04:59.927
It's one of the trickiest[br]concepts in programming,

0:04:59.927,0:05:01.730
and in JavaScript in particular.

0:05:01.730,0:05:04.734
And it's something you'll get better at[br]as you keep practicing.