Now that you've mastered the basics of functions,
I want to talk about a topic that can get a little tricky:
the difference between local and global variables.
These terms may not mean anything to you now.
So let's start with an example.
I made this program here to show you
how many inches I grew in my childhood.
Since humans grow at different rates,
I came up with this function, calcInches,
where I can pass in a startAge and an endAge,
and an inchesPerYear,
and then it would calculate how many inches total
were grown during that time.
. . . and return it back to whoever called it.
So you can see here from 0 to 8 years
I call calcInches and I pass 0, 8, and 2.5,
because I grew about 2.5 inches per year.
And so it does a calculation, and you can see it spits out 20.
Then from 8 to 16, I call it from, and I pass it 8 and 16 and then 2
because I didn't quite grow as much, and you can see it spits out 16.
So this is neat, but now I want to actually display
how many inches I grew, total, in my whole childhood.
So how do I do that? Well, I might start by looking at my code
and thinking, "Hmm, what values do I have here?"
Do I have anything that looks like it represents total inches?
Well, I do have this totalInches variable inside my calcInches function,
so I could just output that, see what it says; start there.
So let's say text(totalInches, 10, 200), and put it down at the bottom.
All right, let's see, what have we got?
Oh, o-oh, we've got the 'Oh noes!' guy.
And he says there's a problem.
totalInches is not defined.
Well, that's weird, because we
defined totalInches right here, right? var totalInches =.
Well, the problem is that we declared
totalInches inside a function. On this line here.
And when we declare a variable inside a function,
it's considered a local variable.
It lives only inside this function here (calcInches).
And the code outside the function, all of this, it doesn't see
local variables inside functions.
It only sees whatever gets returned.
It only sees that value, not that variable.
So when we try to use totalInches outside the function,
it doesn't know what it is,
and it says 'Hey, I've never seen this variable before.
It's not defined. I can't display it.'
So there is a way that we can make it
so that the outside code can see this variable.
And that's if we turn it from a local variable into a global variable.
We can do that by moving the definition outside of the function,
into what's called the global scope.
And now, inside the function, all we're doing
is changing the value of it each time, not defining and declaring it.
So you can see that it says 'Total grown over life: 16'
So it found the variable because we made it into a global variable.
But it's not actually the value that we're looking for.
That's just the most recent value.
And that's because every time we call this function,
it's setting totalInches to whatever it's calculating that time. Right?
So what we really want to do is, we want a new variable
that we use only for storing the overall total
that we add to every time we calculate, you know, the total for a range,
So let's change this back to being a local variable,
and let's make a new global variable called lifeInches,
and we'll start it at zero.
And then inside the function, we'll add to this global variable
by saying lifeInches += totalInches.
So we're going to add however much we calculate
each time we call this function,
we're going to add it to the lifeInches global variable.
And then at the bottom,
we'll display lifeInches: text(lifeInches, 10, 200).
Tada! our total growth over life.
Now that's not actually how tall I am. I'm taller than that.
But that's because you know,
we start off born with more than 0 length.
So if I want total, maybe I could start at 20.
And there you go, that's how tall I am.
All right. So let's review, totalInches
is what we call a local variable.
And we know that because we see the declaration of it
inside this function and not outside the function.
And so that means that this outside code here
doesn't know about this variable called totalInches.
Now lifeInches is what we call a global variable.
And we know that because we see its declaration
outside of any function in our global scope.
So try to keep this in mind when
you're writing your functions and your variables.
And think to yourself whether you want
a local variable for just your function to use,
or a global variable for your whole program to use.
And don't worry if this is hard to wrap your head around.
It's one of the trickiest concepts in programming,
and in JavaScript in particular.
And it's something you'll get better at as you keep practicing.