WEBVTT
00:00:00.822 --> 00:00:04.314
We're back with a program
that prints out my array of friends.
00:00:04.314 --> 00:00:06.854
But there's something
that really annoys me about it.
00:00:06.854 --> 00:00:09.472
Every time I add a new friend
to the array, I have to add
00:00:09.472 --> 00:00:11.403
a new text command down here.
00:00:11.403 --> 00:00:13.232
So let's say I add Winston.
00:00:13.232 --> 00:00:15.333
Well, he doesn't automatically show up.
00:00:15.333 --> 00:00:19.915
If I want him to show up, I have to go
and say text(myFriends[3],
00:00:19.915 --> 00:00:22.393
and then change the y position
and then we see Winston.
NOTE Paragraph
00:00:22.393 --> 00:00:24.842
So that's way too much work.
00:00:24.842 --> 00:00:28.262
I just want it so that every time
I add someone else to the array,
00:00:28.385 --> 00:00:31.308
it does the text command automatically.
00:00:31.308 --> 00:00:34.056
Well, do you remember
when we learned loops?
00:00:34.587 --> 00:00:37.156
Loops were a great way
to repeat the same bit of code
00:00:37.156 --> 00:00:38.536
many times in a row.
00:00:38.536 --> 00:00:41.067
Like, if we wanted to have
a bunch of trees in a row
00:00:41.067 --> 00:00:42.746
or a bunch of balloons.
00:00:42.746 --> 00:00:47.197
Well, as it turns out, loops are also
a great way to run a bit of code
00:00:47.197 --> 00:00:49.307
on each element in an array.
00:00:49.766 --> 00:00:53.617
In fact, you'll use a loop almost
every time you use an array.
00:00:53.617 --> 00:00:56.308
They work really well together.
00:00:57.427 --> 00:01:00.708
So lets use a loop to display
my friends' names, instead of having
00:01:00.708 --> 00:01:03.118
all these text commands
to show you what I mean.
00:01:03.348 --> 00:01:06.488
So we'll start with the three questions
we always ask ourselves
00:01:06.594 --> 00:01:08.123
when we're making a loop.
00:01:08.123 --> 00:01:11.237
First, what do I want to repeat?
Well, look up here. What's repeated?
00:01:11.237 --> 00:01:12.762
The text command.
00:01:12.762 --> 00:01:15.824
What do I want to change each time?
Well, let me just look
00:01:15.824 --> 00:01:20.004
and see what's different, the y position
and the current index, right?
00:01:20.004 --> 00:01:25.153
So the friend num and the y position.
00:01:25.310 --> 00:01:28.218
And how long should we repeat?
Well, we keep going
00:01:28.218 --> 00:01:30.730
until there are no more friends.
00:01:32.600 --> 00:01:36.820
So now we know what we want,
and we can make our loop.
00:01:36.952 --> 00:01:40.523
We start off with a counter variable
to keep track of where we are in the loop.
00:01:40.523 --> 00:01:43.392
So we'll say var friendNum = 0;
00:01:44.417 --> 00:01:47.317
We're going to start with zero
because remember that 0
00:01:47.317 --> 00:01:51.816
is the first element in the array, not 1.
Then we have our while loop.
00:01:51.828 --> 00:01:57.208
So we'll say
while(friendNum < my friends.length).
00:01:57.869 --> 00:02:01.697
So we're gonna compare the current
counter variable to the total number
00:02:01.697 --> 00:02:05.358
of things in the array.
Inside the loop, that's where
00:02:05.358 --> 00:02:07.228
we use our text command.
00:02:07.271 --> 00:02:10.912
So we say, text(myFriends[
and then here, instead of a number,
00:02:10.912 --> 00:02:13.101
we're gonna put friendNum
because friendNum represents
00:02:13.101 --> 00:02:14.469
the current number.
00:02:14.469 --> 00:02:17.902
And then we'll just put
one position for now.
00:02:18.172 --> 00:02:22.742
This has given us a little infinite
loop error because we haven't
00:02:22.742 --> 00:02:25.553
actually changed anything
about friendNum.
00:02:25.553 --> 00:02:28.792
Remember, we need to increment
friendNum each time, otherwise the loop
00:02:28.792 --> 00:02:31.666
will go on forever
because that condition's always true.
00:02:32.022 --> 00:02:36.342
I see something happened.
Let me comment out the old code
00:02:36.342 --> 00:02:38.323
so I can really see what's happened.
00:02:38.323 --> 00:02:41.242
What we have is we've showed
all the names,
00:02:41.242 --> 00:02:43.543
but they're all on top of each other.
00:02:43.543 --> 00:02:45.494
So, we need to change our y position.
00:02:45.506 --> 00:02:49.235
Let's just say 'friendNum*30'.
00:02:49.888 --> 00:02:53.279
That's good but Sophia's off the screen
and Sophia's not going
00:02:53.279 --> 00:02:55.306
to be very happy if she finds that out.
00:02:55.306 --> 00:02:59.588
So, let's just add 30 to that.
So now they're all offset by 30.
00:02:59.588 --> 00:03:03.931
Beautiful! So now you see we have
a loop displaying our array.
00:03:04.363 --> 00:03:09.049
And that means if we add more people
like OhNoes Guy, or maybe even Sal,
00:03:09.049 --> 00:03:12.143
if I just add him to the array
then Sal will be my friend.
00:03:12.191 --> 00:03:14.232
Awesome! Now he's my buddy.
00:03:14.232 --> 00:03:18.030
And you see that it just automatically
shows the new friends
00:03:18.333 --> 00:03:20.756
because it's always going
through the whole array.
00:03:21.005 --> 00:03:24.185
So we can delete our old code.
We don't need that anymore.
00:03:24.185 --> 00:03:27.886
And let's just go through
this code here and review what it does.
00:03:27.886 --> 00:03:31.015
So we start off
with friendNum equal to zero.
00:03:31.458 --> 00:03:34.354
We check to see if friendNum is
less than the current length.
00:03:34.354 --> 00:03:37.515
So you imagine zero is
less than six. That's true.
00:03:37.856 --> 00:03:41.940
So then we go inside here
and we say text, my friends friendNum.
00:03:41.940 --> 00:03:44.438
So that'll be my friends zero,
the first time.
00:03:44.612 --> 00:03:47.588
And then 30 plus zero times 30.
00:03:47.588 --> 00:03:52.800
So it displays Sophia at 10 and 30.
That's what it does.
00:03:53.771 --> 00:03:56.350
And then friendNum++.
So then it becomes 1.
00:03:56.350 --> 00:03:58.380
And then it goes back around
and says, "Ok, is 1 less
00:03:58.380 --> 00:04:00.210
than myfriends.length?
Yeah, it is."
00:04:00.361 --> 00:04:02.592
And it keeps going,
keeps going, keeps going.
00:04:02.592 --> 00:04:05.872
And then finally we get to Sal.
Remember, Sal is actually
00:04:05.872 --> 00:04:10.952
the sixth element in the array,
but he's index 5, since we start at zero.
00:04:10.952 --> 00:04:13.803
So, is five less than six? Yes.
00:04:13.803 --> 00:04:16.032
So it displays myfriends five.
00:04:16.032 --> 00:04:20.112
And then it becomes six
and we say, "Is six less than six?"
00:04:20.239 --> 00:04:21.828
No. It's equal.
00:04:21.828 --> 00:04:25.388
So this'll be false.
So it will never display the sixth element
00:04:25.388 --> 00:04:29.067
which is good
because there is nothing in index six.
00:04:29.067 --> 00:04:33.248
There's a sixth element,
but nothing in index six.
00:04:33.248 --> 00:04:36.409
it can be really confusing,
the fact that it's zero and one
00:04:36.409 --> 00:04:39.028
and doing all that
but you'll get the hang of it.
00:04:39.028 --> 00:04:41.368
All right, so that's our loop.
00:04:41.927 --> 00:04:45.008
Now, if you want to, you can
actually use a for loop
00:04:45.008 --> 00:04:46.720
as well if you prefer for loops.
00:04:46.781 --> 00:04:51.951
For for loops, we'll just say, for,
and then, var friendNum = 0;
00:04:52.661 --> 00:04:54.431
and then we have our condition
00:04:54.431 --> 00:04:57.821
friendNum < myFriends.length
00:04:57.821 --> 00:05:01.241
and then our increment: friendNum++
00:05:01.241 --> 00:05:06.612
and then inside the for loop, we can
just put just this line of code here.
00:05:06.612 --> 00:05:09.482
and I'll just change the x
so that you can see
00:05:09.545 --> 00:05:14.234
it does exactly the same thing.
So it's up to you which one you use,
00:05:14.234 --> 00:05:17.094
but the point is to use a loop
with your arrays
00:05:17.094 --> 00:05:19.815
because it will make you so powerful.