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

Introducing ES2015

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

For...Of

3:18 with Guil Hernandez and Ken Howard

A new way to loop over items in an iterable like String, Array, Set, and Map

Resources

for...of Documentation - Mozilla Developer Network

To learn more about the uses of for...in, check out the Mozilla Developer Network Documentation
for...in Documentation - Mozilla Developer Network

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

    When developing an application we inevitably need to iterate over a dataset. 0:00
    For example, an Ajax request sends back a list of names or an array of objects. 0:05
    And our program needs to go over each item in the array. 0:10
    The array for each method provided in ES5 made looping over an array a breeze. 0:14
    ES2015 gives us a similar but 0:19
    slightly different technique the, the for of statements. 0:21
    You can follow along by launching the workspace for this video. 0:26
    So from the beginning of JavaScripts existence, we've relied heavily 0:29
    on a basic for loop, where we determine the length of an array and 0:33
    iterate by increment a variable by one for each pass. 0:37
    For example let's take a look at the file for-loop.js containing a basic for loop. 0:40
    If I run the file, the console logs the numbers one through six. 0:47
    This works well enough but it's cumbersome. 0:51
    Now ES5 gave us for each to process each item of an array in a callback function. 0:55
    So if you wanted to control the loop to end it early, 1:01
    we still had to use the for loop. 1:04
    Now let's take a look at the file for-each.js which contains 1:07
    a collection of teachers. 1:12
    So say I wanted to log only Nick's rating to the console. 1:15
    Well using for-each it would look something like this. 1:20
    And when I run this code, I see Nick's rating in the console. 1:28
    But what I don't see is how many times this function was called so 1:33
    I'll add another log message outside of my if statement. 1:38
    We'll say console.log teacher.name. 1:40
    And you've probably already guessed that the names of online teachers will log 1:49
    to the console. 1:53
    So let's see. 1:54
    And sure enough all nine teacher names are logged. 1:57
    Luckily, ES2015 has a way to iterate over an array of values and 2:01
    break out of the loop when needed. 2:07
    So I'm going to rewrite the for 2:10
    each loop using the new for of syntax by 2:14
    typing for let teacher of teachers. 2:19
    And now I can short circuit the loop or 2:26
    break out of the loop after it logs Nick by using the break keyword. 2:29
    So let's give it a try. 2:37
    Over and the console, I'll run the code. 2:39
    And now only seven teachers are logged 2:42
    followed by Nicks rating which is exactly what I expected. 2:45
    Keep in mind that for of can not be used with regular objects. 2:50
    You'd want to use the for 2:55
    in statement instead when looping over object properties. 2:57
    So check the teachers notes to learn more about for in. 3:00
    However, for of can be used with any interval object like strings, 3:04
    arrays, maps, and sets. 3:09
    Coming up in the next video we'll take a look at set, 3:12
    a new type of iterable that lets you store unique values. 3:14

    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