If/Else Part 2 (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/

Here's where we left off
with our coin-flipping game.

We started out by generating
a random number between 0 and 1,

and then rounding that number
to the nearest integer.

So this gave us a number
that was either 0 or 1.

And then we illustrated
our super-realistic coin with this ellipse

that was either purple or yellow,
depending on what the number was.

And here's the code where we did that.

So we said if integer is equal to 0
set the fill code to be purple,

otherwise, set it to yellow.

And then we draw the coin down here.

But now I've decided
that actually my coin has 3 sides.

Yep, a 3-sided coin.

So let's add that third side.

I'm going to start by making
a number between 0 and 2,

so after we round that, it will give me
an integer that's either 0, 1, or 2.

But if we look at our drawing code,
we're only accounting for 2 cases here.

So if integer is 0, make it purple,
otherwise, make it yellow.

But now, otherwise can mean
either 1 or 2.

But wait, what if I did the same thing
that we did before,

but inside this else block?

So I'm just going to say:
if integer is equal to 1,

then set the fill color to be yellow,
like it was before,

else, we will set the fill color
to be red.

Red's pretty good.

So what this means is,

if integer is equal to 0,
set the color to be purple,

otherwise, if it's 1,
we will make it yellow;

otherwise, that is,

if it wasn't 0, it wasn't 1,
it must be 2, we'll make the color red.

I press restart a bunch of times.
It works! Woohoo!

So then if I wanted
to add more sides to my coin,

I can go up here, make it 0 to 3,
and then go deeper into this else block

and add more if-else's
and so on and so forth,

until I have a bazillion nested blocks.

And only then will I realize this code
is disgusting! I mean gross!

Code is supposed to be easy to read
and pretty, not as ugly as possible.

So here's what we're going to do:

Whenever you have
just a single if statement

or an if-else statement
inside an else block,

so that means we're not doing
anything else outside of these blocks,

we're not setting the stroke color,

we don't have anymore
if statements, nothing.

All we have is that one if statement,
and maybe it comes with an else block.

Then we can actually combine
this condition with the line before

and say, else if integer is equal to 1,
then set the fill color to yellow.

And then this last else block
isn't nested anywhere,

just comes at the very end all by itself.

Great! So now what this means is

if integer is equal to 0,
set the color to purple,

otherwise, if integer is equal to 1,
set it to yellow,

otherwise, so if both of these were false,
then set it to red.

I press restart a bunch of times,
you can see it still works.

Great! And the cool thing about this is
we can have as many else-if's as we want,

which makes it really easy for me
to add more sides to my coin.

So let's do that now: I'm going to make
a number between 0 and 3,

and then just add one more else block

that says else if integer is equal to 2

we'll set the fill color to... well,
it's red before so we can keep it red.

And then this last else block will be
for when an integer is equal to 3,

it will make it blue. Great!

All right.

So in order to do this, you always have
to start with an if statement,

and then you can have
as many else-if's as you want,

and then this last guy is optional.

We can actually do without it,

and then it's possible
that all of these will be false,

so none of these blocks gets executed.

But as long as we have that there,

then exactly one of these blocks
will be run.

Cool? Now this is a case
where it doesn't really matter

if you say if else-if else-if else,

or just use plain old if statements
like we had in the beginning,

so if integer is equal to 3.

And that's because it's never possible

for integer to equal 0,
and then also 1, 2, or 3.

Great. So these conditions
are all mutually exclusive.

Only one of these blocks
will ever get run anyway.

But that's not always the case.

What if we try to make a game
like this without rounding to an integer?

So I'm going to get rid of this part
where we round it,

and the other part
where we draw it to the screen.

And let's make up
some new rules to my game.

So I'm still generating
a number between 0 and 3,

put some more tick marks
on our number line.

So let's say that if the number falls
between 0 and 1, we will make it purple.

Oh, that doesn't look like a 'p' at all.
You get the idea. OK.

And then if it's between 1 and 2,
we can make it yellow.

And if it's between 2 and 3,
we will make it red.

Great. So let's see how we can do that
with if and else-if's.

So I can start out by saying
if number is less than 1,

so if it's less than 1,

and I know it's between 0 and 3,
then it must be in this range,

then I'll set the fill color to be purple.

Otherwise, if the number is less than 2,

I can set the fill color
to be yellow, 255...

And otherwise,
I'll set the fill to be red.

Great! And it works just as intended.

So if the number was less than 1,
then again, it's in this range.

Otherwise it's greater than or equal to 1,
but it's also less than 2,

so that puts it in this range,
so we're going to set the color to yellow.

Otherwise, it must be greater
than or equal to 2,

so it's going to fall in that range.

And here's a case

where we couldn't just say
if number is less than 2,

and if number is less than 3,

because if number is less than 1,
then it's definitely is less than 2

and it's also going to be less than 3.

So our coin
is always going to end up red.

And that's why in this case,
it's really helpful to have else-if.