More 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, we already made
this super cool variable

for Winston's eye size,
which has been really helpful

because it saves us a lot of typing
when we want to change

the size of Winston's eyes.

Remember: before, we had to
type the same number four times

whenever we wanted
to change the size of his eyes.

But, can we use variables
to replace numbers

when they're not all the same?

Like, what if I wanted to
move Winston over a little bit?

I could change
each of these x coordinates,

but they're not all the same anyways,

so I can't just replace them all
with some variable.

But wait!

Once I assign a number to a variable,
I can use that variable

exactly as if it were that number,

which means I can use variables
and math expressions.

So, how about this:
let's make a variable

for the x position of Winston.

Call it var x.

Simple enough.
Okay, now let's give it

the value of the x coordinate
of Winston's face.

His face is being drawn
at x coordinate 200.

So, we're going to say var x gets 200.

Now I can replace this number
with my new variable x,

and when I change the value of x,
it moves Winston's face,

but not his eyes or his mouth.

So, to fix that, we're going to define

the position of his eyes and his mouth,

relative to the position of his face.

The x coordinates
are going to be the centers

of all the other ellipses,
so his face is being drawn at--

that's 200,
and let's do his left eye first.

So, this ellipse is his left eye,
and we can see

that it's being drawn at 150.

Right here, that is 150,

and I know that 150 is 50 less than 200.

So, his left eye should be
wherever his face is, minus 50.

It's going to be x,
which is the position of his face, - 50.

And now, if I change the value
of this x coordinate,

his eye moves along with his face.

Let's do the other ones.

So, his right eye is being drawn at 300,

I can see, so this over here is 300.

And 300, I know, is 100 more than 200.

So, his right eye should be
wherever his face is plus 100.

That's x + 100.

And now we just have his mouth.

His mouth is being drawn at 250.

That's over here, we've got 250,

and 250 is 200 plus 50.

So, it's going to be wherever--
ooh, that's a 5--

wherever his face is,
x + 50.

And now--
I'm going to get rid of these scribbles--

whenever I change the value of x,
it moves his whole face.

Yay!

Now before you go, you should know
a couple more things about variables.

Once you create a variable using var x,

you can assign a value to it
as many times as you want.

So, after giving x the value of 198,

I could say x gets 300,

or x gets 150.

And from then on,
the computer would treat x

as if it were
whatever we last assigned it.

So, in this case, 150.

But, you only need to type var
once per variable.

If, over here, I had typed
var x gets 150 instead,

that would have made
a brand new variable named x,

completely destroying
the old variable x in the process,

so all these variables
are gone, in the dumpster.

And then, afterwards, the computer
would only use the new variable.

Sometimes you can do this kind of thing
without horrible things happening to you,

but I wouldn't advise it.

For now, I'm just going to do it once:
var x gets 150.

And now, conveniently,
I can move all of Winston off the screen,

so I can talk about my next point.

Whenever you have
a variable equals something,

that variable is in a happy, safe place.

In fact, to the left of the equal sign
is the only place

where a variable
can truly feel like itself,

because that is the only place
where the computer

will consider it to be a variable.

Anywhere else, the computer
just pretends it's a value.

So even if we do something like this:

var x gets 10

and then x gets x.

Woo, confusing.

Well, over on the left,
we've got x,

which is a free-thinking,
independent variable;

one that can grow, can change!

But, on the right, it's just,
well it's just 10.

So sad!
But that means

we can do really useful stuff like this:

I can say x gets x + 1

So, on the left, we've got our variable
in a happy, safe place,

and on the right, we have this variable,

which we know is basically just a number,

so it's just 10.

So, we can mentally replace
this with x gets 10 plus 1,

Which just means x gets 11.

So, this whole line is basically
just saying x gets 11,

so from now on the value of x is 11.

Let's see what happens if we
bring another variable into the equation.

I'm going to do var x gets 10,

var y gets 20,

x gets y --

oh, my god--

and y gets 7.

Okay, and what I want to know is,

what is the value of x?

Let's figure this out.

So, at this line here,
we're making a new variable x,

and assigning it the value of 10.

So the value of x is 10.

At this line, we're making
a new variable y,

and giving it the value of 20.

We don't do anything to x,

so the value of x is still 10.

Over here, we're saying x gets y.

Well, that's pretty confusing,
but if you think about it,

we know that only one of these variables

is in the happy, safe place,

and the other variable is being treated

exactly as if it were a number.

So over here, we can mentally replace

this y with its value, which is 20,

and we know that what this line
really means is x gets 20.

So, the value of x here is 20.

And then, over here, we've got y
in the happy safe place this time,

but it's not really that confusing,

because we've just got a number
on the other side.

So, here's the big question:
when I change the value of y here,

does that change the value of x up here?

And the answer:
No! No, no, no, no, no!

You've got to remember, up here,

y is just being treated like a number.

The computer's going to completely ignore
that it's a variable,

forget the fact that it can change,

and it's just going to say,

"Oh, y? What you really mean is 20."

So right here,
we're just assigning a number to x,

we're not assigning a variable.

We're assigning the value of y,
which is 20,

and that means that
the value of x stays 20,

even after we change the value
of this y variable from the last line.

Phew! Capisce?

Well, now you guys are
total experts on variables.

Congratulations!