1 00:00:00,000 --> 00:00:10,585 [MUSIC] 2 00:00:10,585 --> 00:00:14,200 Arrays are one of the most used data structures in JavaScript. 3 00:00:14,200 --> 00:00:14,820 With an array, 4 00:00:14,820 --> 00:00:18,930 you can assign an almost limitless number of items to a single variable. 5 00:00:18,930 --> 00:00:21,060 You've learned how you might use arrays to, for 6 00:00:21,060 --> 00:00:24,170 instance, hold the tasks in a to do list, or 7 00:00:24,170 --> 00:00:29,570 to store the names of students in a class, create a musical playlist, and more. 8 00:00:29,570 --> 00:00:33,580 Once you have an array, you'll want to work with the elements inside it. 9 00:00:33,580 --> 00:00:34,550 For example, for 10 00:00:34,550 --> 00:00:39,130 a musical playlist, you might want to display each song in the list. 11 00:00:39,130 --> 00:00:41,055 Or for an array of quiz questions, 12 00:00:41,055 --> 00:00:45,640 you'll want to ask each question in the array one after the other. 13 00:00:45,640 --> 00:00:50,620 To access each item in an array, you need to get the first element and do something 14 00:00:50,620 --> 00:00:54,680 with it, like display it on a page or compare it against some other value. 15 00:00:54,680 --> 00:00:59,730 Then you move to the second element and repeat those steps, then the third, and 16 00:00:59,730 --> 00:01:03,720 so on, until you're done processing the entire list of elements. 17 00:01:03,720 --> 00:01:08,806 In other words, you need to repeat the same steps for each item in the array. 18 00:01:08,806 --> 00:01:10,630 Does this sound familiar? 19 00:01:10,630 --> 00:01:12,930 In a previous course, you learned about loops, 20 00:01:12,930 --> 00:01:17,070 which repeat a set of actions over and over again until a condition is met. 21 00:01:17,070 --> 00:01:19,970 The for loop is often used to loop through an array, or 22 00:01:19,970 --> 00:01:24,290 as programmers like to say, iterate through the elements in an array. 23 00:01:24,290 --> 00:01:25,370 For example, 24 00:01:25,370 --> 00:01:30,050 say you wanted to display the names inside a students array in the console. 25 00:01:30,050 --> 00:01:32,460 There are four names in this students array. 26 00:01:32,460 --> 00:01:36,190 To display each name, you'll need to run the loop four times. 27 00:01:36,190 --> 00:01:39,060 Here's an example of a for loop that runs four times. 28 00:01:40,320 --> 00:01:44,810 Before the loop runs, a counter variable, i, is initialized to 0. 29 00:01:44,810 --> 00:01:48,930 Each time through the loop, the i counter increments by 1. 30 00:01:48,930 --> 00:01:53,110 And as soon as i is no longer less than 4, the loop ends. 31 00:01:53,110 --> 00:01:57,250 But you can't always be sure that the array will have four names in it. 32 00:01:57,250 --> 00:02:01,820 Maybe you add two more students to the class, or three students leave the class. 33 00:02:01,820 --> 00:02:04,310 You do know that you want the loop to execute 34 00:02:04,310 --> 00:02:07,370 as many times as the number of students. 35 00:02:07,370 --> 00:02:10,050 Do you remember how to retrieve the number of elements in an array? 36 00:02:11,160 --> 00:02:15,170 Every array has a link property that returns the number of elements 37 00:02:15,170 --> 00:02:16,090 in that array. 38 00:02:16,090 --> 00:02:20,460 So you can replace 4 here with a link property, like this. 39 00:02:20,460 --> 00:02:23,530 Now, if you add one or more students to the list, 40 00:02:23,530 --> 00:02:27,790 the loop runs according to the number of elements inside the array. 41 00:02:27,790 --> 00:02:30,960 But how do you access and display each student? 42 00:02:30,960 --> 00:02:35,020 Remember that elements in an array are assigned an index value or 43 00:02:35,020 --> 00:02:36,530 position in the array. 44 00:02:36,530 --> 00:02:41,540 The first element is at index 0, the second is at index 1, and so on. 45 00:02:41,540 --> 00:02:46,250 It just so happens that the index value is built right into the loop. 46 00:02:46,250 --> 00:02:49,970 The i counter variable, which starts at 0 then increments by 1 47 00:02:49,970 --> 00:02:54,190 each time through the loop, maps perfectly to the array elements. 48 00:02:54,190 --> 00:02:56,260 Let's dive into how this works. 49 00:02:56,260 --> 00:03:01,889 The for loop condition checks if i, the counter, is less than students.length. 50 00:03:01,889 --> 00:03:04,670 In other words, is 0 less than 4? 51 00:03:04,670 --> 00:03:05,430 Yes, it is. 52 00:03:05,430 --> 00:03:07,010 So the loop runs. 53 00:03:07,010 --> 00:03:09,910 Remember, to access an element inside an array, 54 00:03:09,910 --> 00:03:13,270 you type the name of the array followed by square brackets, and 55 00:03:13,270 --> 00:03:16,480 between the brackets, include the element's index value. 56 00:03:16,480 --> 00:03:20,060 In this first loop iteration, the value of i is 0, so 57 00:03:20,060 --> 00:03:24,781 the program logs the element at index position 0 in the students array, Lee. 58 00:03:25,790 --> 00:03:29,710 This is the end of the first loop iteration and i increases by 1. 59 00:03:29,710 --> 00:03:32,074 Now the value of i is 1. 60 00:03:32,074 --> 00:03:33,900 The condition is tested again. 61 00:03:33,900 --> 00:03:35,660 Is 1 less than 4? 62 00:03:35,660 --> 00:03:36,790 Yes, it is. 63 00:03:36,790 --> 00:03:40,820 So the loop runs again, logging the student at index position 1. 64 00:03:40,820 --> 00:03:44,480 This happens over and over until i is 4, 65 00:03:44,480 --> 00:03:48,250 then the condition is no longer true and the loop sequence ends.