Local and Global Variables (Video Version)

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/

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.