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
Loops are a powerful tool in programming. A loop is a way to repeat the same actions a certain number of times. There are many different types of loops available to use in JavaScript. This video will teach you how to access each item in an array with a forEach loop.
Resources
Practice forEach
Now that you've learned about JavaScript's forEach method, practice using it with this series of challenges.
Arrays also work closely together
with another common feature in
0:00
JavaScript, loops.
0:03
Loops are a powerful tool in programming.
0:05
A loop is a way to repeat the same
actions a certain number of times.
0:07
Now, there are many different types of
loops available to use in JavaScript.
0:10
But they all essentially
do the same thing,
0:14
they repeat an action
a given number of times.
0:16
So here I'll cover two common ways
you might see loops written in modern
0:18
JavaScript.
0:22
First is the for-each loop.
0:23
For-each is simply a loop that
accesses each item in an array.
0:25
So for example, instead of manually
accessing each element in an array by
0:30
index like I showed you earlier,
we can use a loop to do it for us.
0:34
So we could, for instance, write a loop
that grabs each movie title in the movies
0:38
array, and converts them into an HTML
list with links the user can click.
0:44
To write a for-each loop, you first
put the variable name of the array,
0:48
then .forEach and a set of parentheses.
0:54
Inside the parentheses,
you provide for-each a function to run and
0:58
complete once for
each item inside the array.
1:02
You'll hear this type of function
referred to as a callback function.
1:06
For this example, I'll write a function
that pops up an alert box for
1:11
each movie title in the movies array.
1:15
The function will take one parameter,
I'll call it movie.
1:18
The parameter movie represents
the current element or
1:23
movie title being processed
here in the array.
1:28
And notice that there's no name after
the function keyword this time,
1:32
because it has no name.
1:36
It's called an anonymous function.
1:37
You'll often use anonymous functions
to pass functions as parameters
1:39
to another function.
1:43
So inside the body of the function,
or between the curly braces,
1:45
we can do whatever we want
with each item in the array.
1:48
So I'm gonna pop up an alert dialogue
box for each movie title in the array.
1:51
I'll type alert, and pass it movie.
1:57
So forEach is going to call
the function passed to it,
2:02
for each element in the movies array.
2:07
When the function is called, a movie
title is passed into the movie argument,
2:12
then the next, the next, and so on.
2:18
The loop stops when it has reached
the end of the movies array, and
2:22
there are no more movie titles
to pop up in the alert box.
2:26
So this is just a simple example
of how loops in JavaScript
2:30
manage the process of accessing
each element in an array for you.
2:33
Many programmers find
for-each easier to read
2:37
than some of the other
ways of writing loops.
2:40
The code in a for-each
loop is easier to and
2:42
understand, and
usually involves less codes.
2:45
You need to sign up for Treehouse in order to download course files.
Sign up