mozilla
Your Search Results

    for...of

    This is an experimental technology, part of the ECMAScript 6 (Harmony) proposal.
    Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future version of browsers as the spec changes.

    Summary

    The for...of statement creates a loop Iterating over iterable objects (including ArrayMap, Setarguments object and so on), invoking a custom iteration hook with statements to be executed for the value of each distinct property.

    Syntax

    for (variable of object)
      statement
    
    variable
    On each iteration a value of a different property is assigned to variable.
    object
    Object whose enumerable properties are iterated.

    Examples

    Difference between for...of and for...in

    The following example shows the difference between a for...of loop and a for...in loop. While for...in iterates over property names, for...of iterates over property values:

    let arr = [3, 5, 7];
    arr.foo = "hello";
    
    for (let i in arr) {
       console.log(i); // logs "0", "1", "2", "foo"
    }
    
    for (let i of arr) {
       console.log(i); // logs "3", "5", "7"
    }
    

    Using Array.prototype.forEach()

    To get the same property values the for...of loop would return, you can also use the Array.prototype.forEach() method:

    let arr = [3, 5, 7];
    arr.foo = "hello";
    
    arr.forEach(function (element, index) {
        console.log(element); // logs "3", "5", "7"
        console.log(index);   // logs "0", "1", "2"
    });
    
    // or with Object.keys()
    
    Object.keys(arr).forEach(function (element, index) {
        console.log(arr[element]); // logs "3", "5", "7", "hello"
        console.log(arr[index]);   // logs "3", "5", "7"
    });

    Iterating over DOM collections

    Iterating over DOM collections like NodeList: the following example adds a read class to paragraphs that are direct descendants of an article:

    // Note: This will only work in platforms that have
    // implemented NodeList.prototype[Symbol.iterator]
    let articleParagraphs = document.querySelectorAll("article > p");
    
    for (let paragraph of articleParagraphs) {
      paragraph.classList.add("read");
    }
    

    Iterating over generators

    You can also iterate over generators:

    function* fibonacci() { // a generator function
        let [prev, curr] = [0, 1];
        for (;;) {
            [prev, curr] = [curr, prev + curr];
            yield curr;
        }
    }
    
    for (let n of fibonacci()) {
        // truncate the sequence at 1000
        if (n > 1000)
            break;
        print(n);
    }
    

    Specifications

    Specification Status Comment
    ECMAScript 6 (ECMA-262)
    The definition of 'for...of statement' in that specification.
    Draft Initial definition.

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 29[1]
    38
    13 (13)
    17 (17) (.iterator)
    27 (27) ("@@iterator")
    36 (36) (Symbol.iterator)
    Not supported 25 7.1
    Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support ? 29[1]
    38
    13.0 (13)
    17.0 (17) (.iterator)
    27.0 (27) ("@@iterator")
    36.0 (36) (Symbol.iterator)
    ? ? iOS 8

    [1] The feature is available behind a preference. In chrome://flags/#enable-javascript-harmony, activate the entry “Enable Experimental JavaScript”.

    See also

    Document Tags and Contributors

    Last updated by: knownasilya,
    Hide Sidebar