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
Use the for loop to iterate over an array of song names and display them on a web page.
Get the average of an array of scores
In the following example, a for loop accesses each number in the scores array and adds it to the current value of total. When the loop completes, the console displays the average score by dividing the value of total by the length of the scores array.
const scores = [ 20, 50, 75, 100, 115 ];
let total = 0;
for ( let i = 0; i < scores.length; i++ ) {
total += scores[i];
}
console.log( total / scores.length );
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
Let's use the for
loop to work with an array.
0:00
We'll take an array of song names and
display them on a web page, like this.
0:03
I'll open the Elements panel
in Chrome DevTools, and
0:07
you can see that there's
an ordered list of song names.
0:10
Each of these list items
is one item in an array.
0:14
Now let's write a program
that generates this list
0:17
by running through the array
one item at a time.
0:20
To code along with me,
open the file playlist-1.js, and
0:23
in index.html, update the script tag
source attribute to js/playlist-1.js.
0:29
This file has an array named playlist
containing several song names.
0:37
In this file, I'll start by writing
a function named createListItems.
0:42
Its job will be to take
an array of elements and
0:49
place each inside a list item.
0:51
The function needs to accept
an array as an argument
0:54
which it will use to create the list.
0:58
In the function definition,
add a parameter named arr for array.
1:00
Remember, a parameter's like a variable
that holds a value passed to the function.
1:04
The array passed to this function will
get assigned to the arr parameter.
1:09
The function should build up an HTML
string that looks similar to this.
1:13
In other words, it needs to return
list items that can be displayed
1:18
inside an ordered list.
1:21
Inside the function,
I'll declare a variable named
1:25
items to hold the list items and
initialize it to an empty string.
1:28
With this items variable, I can build and
1:32
store the entire string before returning
it and displaying it on the page.
1:35
The next step is to add a for
1:41
loop that iterates through the elements
in the array passed to this function.
1:43
I'll initialize a counter
variable named i = 0,
1:49
then add a test condition
with i < arr.length.
1:55
Again, this condition checks that
i is less than the total number of
2:00
elements inside the array
passed to this function.
2:04
In other words,
the array assigned to this arr parameter.
2:09
Once i is no longer less
than the array's length,
2:12
there are no more elements to
loop through, so the loop ends.
2:15
Finally, I'll increase the value of
i by one after each loop iteration
2:20
with i++.
2:25
Next, I'll create the HTML list items.
2:29
I can do that by building on to or
2:32
adding to the current value
of the items variable.
2:35
Within the loop, I'll use
the addition assignment operator and
2:38
a template literal to add a set of li tags
2:42
displaying the element from the array
at the current index position.
2:46
Remember, the i variable holds
the current index value.
2:50
Inside the li tags, I'll use string
interpolation with dollar sign,
2:55
curly braces to insert the element at
the index that matches the i variable.
3:00
Now I have a loop that runs as many times
3:07
as there are elements in the array
assigned to the arr parameter.
3:10
Finally, the createListItems function
3:16
needs to return the value
assigned to the items variable.
3:19
You've learned that a function doesn't
actually do anything until it's called or
3:25
invoked.
3:29
So I'll first test the function in
the browser's JavaScript console by
3:30
calling createListItems and
passing it the playlist array.
3:34
And there's the full string
holding the six list items.
3:41
Notice how each playlist element is
inside its own set of li tags, great!
3:44
Now, let's display the list items on
the page within an HTML ordered list.
3:52
There are several ways you might do this.
3:57
I'll use a familiar method,
document.querySelector.
4:00
This should select the main
element in index.html.
4:04
Then to display the HTML inside main,
I'll use the innerHTML property.
4:09
I'll set the property to a template
literal to build the final string.
4:15
Now I can use the createListItems function
to display each item between ol tags.
4:19
These values will be dynamically
inserted into the final string, so
4:28
I need to use interpolation or
the dollar sign, curly braces syntax here.
4:32
Inside the curly braces,
I'll call the createListItems function and
4:37
pass it the playlist array.
4:42
Finally, in index.html,
just outside the main element,
4:44
I'll add a heading to this page
that says My Music Playlist.
4:48
All right, let's test it in the browser.
4:55
I'll save the file, refresh the page,
and there's our music playlist.
4:57
Now, any updates you make
to the playlist array,
5:05
like adding a new song, for
example, will appear on the page.
5:08
Working with each element in an array or
5:18
iterating through an array is one of
the most common uses of a for loop.
5:21
You can use arrays and
loops together in many ways.
5:27
For example,
say you had an array of scores.
5:29
To find the average of the scores,
you could use a for
5:32
loop to access each number in the array
and add it to an ongoing total.
5:35
Then when the loop's done, divide
the total by the length of the array.
5:39
Check out an example I wrote in
the teacher's notes with this video.
5:43
And keep in mind that there
are other more compact ways of
5:46
iterating through arrays using special
iteration methods you'll learn about later
5:49
in your JavaScript learning journey.
5:54
Learning how to use for
loops with arrays now
5:55
will set you up to better understand the
mechanics of how the other methods work.
5:59
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