Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
The for loop provides one way to loop (or iterate) through the elements in an array.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up