Preview
Video Player
00:00
00:00
Using a 'for' Loop to Iterate Over an Array
3:49The for loop provides one way to loop (or iterate) through the elements in an array.
[MUSIC]
0:00
Arrays are one of the most used
data structures in JavaScript.
0:10
With an array,
0:14
you can assign an almost limitless
number of items to a single variable.
0:14
You've learned how you
might use arrays to, for
0:18
instance, hold the tasks in a to do list,
or
0:21
to store the names of students in a class,
create a musical playlist, and more.
0:24
Once you have an array, you'll want
to work with the elements inside it.
0:29
For example, for
0:33
a musical playlist, you might want
to display each song in the list.
0:34
Or for an array of quiz questions,
0:39
you'll want to ask each question
in the array one after the other.
0:41
To access each item in an array, you need
to get the first element and do something
0:45
with it, like display it on a page or
compare it against some other value.
0:50
Then you move to the second element and
repeat those steps, then the third, and
0:54
so on, until you're done processing
the entire list of elements.
0:59
In other words, you need to repeat
the same steps for each item in the array.
1:03
Does this sound familiar?
1:08
In a previous course,
you learned about loops,
1:10
which repeat a set of actions over and
over again until a condition is met.
1:12
The for loop is often used
to loop through an array, or
1:17
as programmers like to say,
iterate through the elements in an array.
1:19
For example,
1:24
say you wanted to display the names
inside a students array in the console.
1:25
There are four names in
this students array.
1:30
To display each name,
you'll need to run the loop four times.
1:32
Here's an example of a for
loop that runs four times.
1:36
Before the loop runs, a counter variable,
i, is initialized to 0.
1:40
Each time through the loop,
the i counter increments by 1.
1:44
And as soon as i is no longer less than 4,
the loop ends.
1:48
But you can't always be sure that
the array will have four names in it.
1:53
Maybe you add two more students to the
class, or three students leave the class.
1:57
You do know that you
want the loop to execute
2:01
as many times as the number of students.
2:04
Do you remember how to retrieve
the number of elements in an array?
2:07
Every array has a link property
that returns the number of elements
2:11
in that array.
2:15
So you can replace 4 here with
a link property, like this.
2:16
Now, if you add one or
more students to the list,
2:20
the loop runs according to the number
of elements inside the array.
2:23
But how do you access and
display each student?
2:27
Remember that elements in an array
are assigned an index value or
2:30
position in the array.
2:35
The first element is at index 0,
the second is at index 1, and so on.
2:36
It just so happens that the index
value is built right into the loop.
2:41
The i counter variable,
which starts at 0 then increments by 1
2:46
each time through the loop,
maps perfectly to the array elements.
2:49
Let's dive into how this works.
2:54
The for loop condition checks if i,
the counter, is less than students.length.
2:56
In other words, is 0 less than 4?
3:01
Yes, it is.
3:04
So the loop runs.
3:05
Remember, to access
an element inside an array,
3:07
you type the name of the array
followed by square brackets, and
3:09
between the brackets,
include the element's index value.
3:13
In this first loop iteration,
the value of i is 0, so
3:16
the program logs the element at index
position 0 in the students array, Lee.
3:20
This is the end of the first loop
iteration and i increases by 1.
3:25
Now the value of i is 1.
3:29
The condition is tested again.
3:32
Is 1 less than 4?
3:33
Yes, it is.
3:35
So the loop runs again,
logging the student at index position 1.
3:36
This happens over and over until i is 4,
3:40
then the condition is no longer true and
the loop sequence ends.
3:44