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.