Intro To 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/

So I've got my good friend Winston here
to help us out with this one.

And I know he already looks
impossibly awesome,

but I think I want to change
his eye size a little bit.

So here is where I draw his eyes.

You can see we set the fill color,
and then drop two ellipses.

And if I want to make
this ellipse smaller,

I can change the width,
but then I also want it to be round,

so I'm going to change the height
to be the same thing.

And, well I want the eyes
to be the same size,

so we should change the width
and the height of this eye.

No, now the eyes are a little too small,
so I should change them back.

Wouldn't I be great if I could
just change one number,

and have both eyes change?

And here is where variables come in.

Now, a variable is just like a name
or a placeholder for something else.

I like to think of a variable
as a big bucket with a name on it.

You can put anything
you want in the bucket,

but the name stays the same.

We call the thing inside the bucket
the value of the variable.

So let's start out by actually
making a variable.

I'm going to do it all the way up here.

All you do is type var,
which stands for variable,

Space, and then
the name of the variable,

which should describe
what the variable will hold.

So I'm going to call this one eyeSize.

And you can pretty much
name it whatever you want,

but you're not allowed to have
spaces between words.

And of course,
don't forget that semicolon!

So now I've made
a variable called eyeSize,

because it's going to hold
the size of Winston's eyes.

But so far this variable
doesn't have a value yet.

To give it one, we just say eyeSize,

and then an =, and then 20; .

Okay, now see that equal sign?

Forget whatever your math teacher
taught you about it.

That equal sign does not mean "equals,"
it means assignment.

This means we're assigning
the value 20 to the variable eyeSize.

In other words,
we're putting the number 20

into the bucket called, eyeSize.

And remember how in math class
you can say stuff like,

x = 3, and 3 = x,

and it all means the same thing,
because duuh, they're equal?

Well, you can't do that here, either.

The thing on the left-hand side
of the equal sign

is always the variable.

And the thing on the right-hand side
of the equal sign is always the value

that you are assigning to the variable.

A good way to help you
remember which side is what

is while you're coding
and talking out loud to yourself,

like every cool programmer does,

if you hit an equal sign
don't say "equals," say "gets."

So this becomes, eyeSize gets 20.

And now, whenever I use
eyeSize in my program,

the computer is going to be like,
"Oh yeah, that's a variable,

I know what she really means
is this value 20."

So check it out--
I'm just going to copy this,

and then replace these four numbers

with my new variable eyeSize,

and Voila!

Winston's eyes are now both
perfectly round and the same size,

and if I want to change
the value of both eyes--

or the size of both eyes,

I can just change the value
of this one variable.

Aah that's so cool!

Okay, couple of last notes.

Up here we made
a new variable called eyeSize.

And here we gave it a value of 33.

We can actually do that all in one step

by saying var eyeSize,
that's the first step,

gets 33,
that's the second step.

And if I delete these two lines,

you can see everything still works.

Also remember that the computer
reads your code from top to bottom

so the only reason it knew
what eyeSize was down here,

was because we already
defined it up here.

If I had put it down here instead,

then once we got to this line of code,
the computer's going to be like,

"eyeSize, what the heck is eyeSize?
I don't know what that is."

In fact, here we get an error that says
eyeSize is not defined.

And maybe you're thinking to yourself,

"Yes, I did define it; it's right here!"

But the computer's not smart,
and doesn't get that.

So let's just move it back up to the top.

And you've got to always make sure

that you define your variable
before you try to use it.

And now you know
about variables! Yaaay!