Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

JavaScript Quickstart

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Simplify Repetitive Tasks with a forEach Loop

2:48 with Guil Hernandez

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.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up