Looping through Arrays (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/

We're back with a program
that prints out my array of friends.

But there's something
that really annoys me about it.

Every time I add a new friend
to the array, I have to add

a new text command down here.

So let's say I add Winston.

Well, he doesn't automatically show up.

If I want him to show up, I have to go
and say text(myFriends[3],

and then change the y position
and then we see Winston.

So that's way too much work.

I just want it so that every time
I add someone else to the array,

it does the text command automatically.

Well, do you remember
when we learned loops?

Loops were a great way
to repeat the same bit of code

many times in a row.

Like, if we wanted to have
a bunch of trees in a row

or a bunch of balloons.

Well, as it turns out, loops are also
a great way to run a bit of code

on each element in an array.

In fact, you'll use a loop almost
every time you use an array.

They work really well together.

So lets use a loop to display
my friends' names, instead of having

all these text commands
to show you what I mean.

So we'll start with the three questions
we always ask ourselves

when we're making a loop.

First, what do I want to repeat?
Well, look up here. What's repeated?

The text command.

What do I want to change each time?
Well, let me just look

and see what's different, the y position
and the current index, right?

So the friend num and the y position.

And how long should we repeat?
Well, we keep going

until there are no more friends.

So now we know what we want,
and we can make our loop.

We start off with a counter variable
to keep track of where we are in the loop.

So we'll say var friendNum = 0;

We're going to start with zero
because remember that 0

is the first element in the array, not 1.
Then we have our while loop.

So we'll say
while(friendNum < my friends.length).

So we're gonna compare the current
counter variable to the total number

of things in the array.
Inside the loop, that's where

we use our text command.

So we say, text(myFriends[
and then here, instead of a number,

we're gonna put friendNum
because friendNum represents

the current number.

And then we'll just put
one position for now.

This has given us a little infinite
loop error because we haven't

actually changed anything
about friendNum.

Remember, we need to increment
friendNum each time, otherwise the loop

will go on forever
because that condition's always true.

I see something happened.
Let me comment out the old code

so I can really see what's happened.

What we have is we've showed
all the names,

but they're all on top of each other.

So, we need to change our y position.

Let's just say 'friendNum*30'.

That's good but Sophia's off the screen
and Sophia's not going

to be very happy if she finds that out.

So, let's just add 30 to that.
So now they're all offset by 30.

Beautiful! So now you see we have
a loop displaying our array.

And that means if we add more people
like OhNoes Guy, or maybe even Sal,

if I just add him to the array
then Sal will be my friend.

Awesome! Now he's my buddy.

And you see that it just automatically
shows the new friends

because it's always going
through the whole array.

So we can delete our old code.
We don't need that anymore.

And let's just go through
this code here and review what it does.

So we start off
with friendNum equal to zero.

We check to see if friendNum is
less than the current length.

So you imagine zero is
less than six. That's true.

So then we go inside here
and we say text, my friends friendNum.

So that'll be my friends zero,
the first time.

And then 30 plus zero times 30.

So it displays Sophia at 10 and 30.
That's what it does.

And then friendNum++.
So then it becomes 1.

And then it goes back around
and says, "Ok, is 1 less

than myfriends.length?
Yeah, it is."

And it keeps going,
keeps going, keeps going.

And then finally we get to Sal.
Remember, Sal is actually

the sixth element in the array,
but he's index 5, since we start at zero.

So, is five less than six? Yes.

So it displays myfriends five.

And then it becomes six
and we say, "Is six less than six?"

No. It's equal.

So this'll be false.
So it will never display the sixth element

which is good
because there is nothing in index six.

There's a sixth element,
but nothing in index six.

it can be really confusing,
the fact that it's zero and one

and doing all that
but you'll get the hang of it.

All right, so that's our loop.

Now, if you want to, you can
actually use a for loop

as well if you prefer for loops.

For for loops, we'll just say, for,
and then, var friendNum = 0;

and then we have our condition

friendNum < myFriends.length

and then our increment: friendNum++

and then inside the for loop, we can
just put just this line of code here.

and I'll just change the x
so that you can see

it does exactly the same thing.
So it's up to you which one you use,

but the point is to use a loop
with your arrays

because it will make you so powerful.