Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

English subtitles

← 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:

Get Embed Code
9 Languages

Showing Revision 4 created 08/08/2016 by Kirstin Cosper.

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

  2. But there's something
    that really annoys me about it.
  3. Every time I add a new friend
    to the array, I have to add
  4. a new text command down here.
  5. So let's say I add Winston.
  6. Well, he doesn't automatically show up.
  7. If I want him to show up, I have to go
    and say text(myFriends[3],
  8. and then change the y position
    and then we see Winston.
  9. So that's way too much work.

  10. I just want it so that every time
    I add someone else to the array,
  11. it does the text command automatically.
  12. Well, do you remember
    when we learned loops?
  13. Loops were a great way
    to repeat the same bit of code
  14. many times in a row.
  15. Like, if we wanted to have
    a bunch of trees in a row
  16. or a bunch of balloons.
  17. Well, as it turns out, loops are also
    a great way to run a bit of code
  18. on each element in an array.
  19. In fact, you'll use a loop almost
    every time you use an array.
  20. They work really well together.
  21. So lets use a loop to display
    my friends' names, instead of having
  22. all these text commands
    to show you what I mean.
  23. So we'll start with the three questions
    we always ask ourselves
  24. when we're making a loop.
  25. First, what do I want to repeat?
    Well, look up here. What's repeated?
  26. The text command.
  27. What do I want to change each time?
    Well, let me just look
  28. and see what's different, the y position
    and the current index, right?
  29. So the friend num and the y position.
  30. And how long should we repeat?
    Well, we keep going
  31. until there are no more friends.
  32. So now we know what we want,
    and we can make our loop.
  33. We start off with a counter variable
    to keep track of where we are in the loop.
  34. So we'll say var friendNum = 0;
  35. We're going to start with zero
    because remember that 0
  36. is the first element in the array, not 1.
    Then we have our while loop.
  37. So we'll say
    while(friendNum < my friends.length).
  38. So we're gonna compare the current
    counter variable to the total number
  39. of things in the array.
    Inside the loop, that's where
  40. we use our text command.
  41. So we say, text(myFriends[
    and then here, instead of a number,
  42. we're gonna put friendNum
    because friendNum represents
  43. the current number.
  44. And then we'll just put
    one position for now.
  45. This has given us a little infinite
    loop error because we haven't
  46. actually changed anything
    about friendNum.
  47. Remember, we need to increment
    friendNum each time, otherwise the loop
  48. will go on forever
    because that condition's always true.
  49. I see something happened.
    Let me comment out the old code
  50. so I can really see what's happened.
  51. What we have is we've showed
    all the names,
  52. but they're all on top of each other.
  53. So, we need to change our y position.
  54. Let's just say 'friendNum*30'.
  55. That's good but Sophia's off the screen
    and Sophia's not going
  56. to be very happy if she finds that out.
  57. So, let's just add 30 to that.
    So now they're all offset by 30.
  58. Beautiful! So now you see we have
    a loop displaying our array.
  59. And that means if we add more people
    like OhNoes Guy, or maybe even Sal,
  60. if I just add him to the array
    then Sal will be my friend.
  61. Awesome! Now he's my buddy.
  62. And you see that it just automatically
    shows the new friends
  63. because it's always going
    through the whole array.
  64. So we can delete our old code.
    We don't need that anymore.
  65. And let's just go through
    this code here and review what it does.
  66. So we start off
    with friendNum equal to zero.
  67. We check to see if friendNum is
    less than the current length.
  68. So you imagine zero is
    less than six. That's true.
  69. So then we go inside here
    and we say text, my friends friendNum.
  70. So that'll be my friends zero,
    the first time.
  71. And then 30 plus zero times 30.
  72. So it displays Sophia at 10 and 30.
    That's what it does.
  73. And then friendNum++.
    So then it becomes 1.
  74. And then it goes back around
    and says, "Ok, is 1 less
  75. than myfriends.length?
    Yeah, it is."
  76. And it keeps going,
    keeps going, keeps going.
  77. And then finally we get to Sal.
    Remember, Sal is actually
  78. the sixth element in the array,
    but he's index 5, since we start at zero.
  79. So, is five less than six? Yes.
  80. So it displays myfriends five.
  81. And then it becomes six
    and we say, "Is six less than six?"
  82. No. It's equal.
  83. So this'll be false.
    So it will never display the sixth element
  84. which is good
    because there is nothing in index six.
  85. There's a sixth element,
    but nothing in index six.
  86. it can be really confusing,
    the fact that it's zero and one
  87. and doing all that
    but you'll get the hang of it.
  88. All right, so that's our loop.
  89. Now, if you want to, you can
    actually use a for loop
  90. as well if you prefer for loops.
  91. For for loops, we'll just say, for,
    and then, var friendNum = 0;
  92. and then we have our condition
  93. friendNum < myFriends.length
  94. and then our increment: friendNum++
  95. and then inside the for loop, we can
    just put just this line of code here.
  96. and I'll just change the x
    so that you can see
  97. it does exactly the same thing.
    So it's up to you which one you use,
  98. but the point is to use a loop
    with your arrays
  99. because it will make you so powerful.