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.