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.