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