QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads JavaScript “for of” Loop Tutorial

JavaScript “for of” Loop Tutorial

This post is a part 9 of ECMAScript 6 Complete Tutorial post series.

for of loop was introduced in ES6 which allows you to easily iterate over elements of an collection.for of iterates over the values of elements of a collection not the keys. A collection can be an array, set, list, custom collection object etc.

Earlier to ES6 we had to use for loop or Array’s foreach loop to walkthrough elements of an collection. ES6 introduced a new way for iteration.

An iterator is an construct that lets us visit or walkthrough every element of an collection.

Iterating an Array using “for of”

Here is an example code on how to iterate an array using for of loop

var array = [1, 3, 5, 7, 9];

//'i' references to the values of the array indexes
for(var i of array)
{
    console.log(i); //1, 3, 5, 7, 9
}

Internally for of loop uses @@iterator method of an collection object i.e., for a collection object to be iterable using for of it must have property with a Symbol.iterator key.

Iterating an Custom Collection Object using “for of”

We need to implement Symbol.iterator property on an custom collection. Symbol.iterator returns a Iterator object i.e., a object with next() property. next() is invoked by for of until next() returns {value: undefined, done: true}. To continue looping and return an collection element next() has to return {value: element_value, done: false}.

Here is an code example

var custom_collection = {
    elements:  [1, 4, 6, 9],
    size : 3,
    pointer :0,
    [Symbol.iterator]:  function(){
        var e = this.elements;
        var s = this.size;
        var p = this.pointer;
        return{
            next: function() {
                if(p > s)
                {
                    return { value: undefined, done: true };
                }
                else
                {
                    p++;
                    return { value: e[p - 1], done: false };
                }
            },
        };
    }
}

for(var i of custom_collection)
{
    console.log(i); //1, 4, 6, 9
}
Feb 16, 2015Narayan Prusty
JavaScript Arrow "=>" FunctionWordPress Post Series Plugin
Comments: 3
  1. Juliet
    6 years ago

    Nice blog..i really enjoy..

    ReplyCancel
  2. Bappi Datta
    7 years ago

    for(i of array)
    {
    console.log(i); //1, 3, 5, 7, 9
    }

    i think you need to add ‘var’ keyword before ‘i’.

    ReplyCancel
    • Narayan Prusty
      7 years ago

      Thanks for pointing that out. Corrected it.

      ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image7 years ago 3 Comments Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Iterating an Array using “for of”
  • Iterating an Custom Collection Object using “for of”
Related Articles
  • “foreach” vs “for of” vs “for in” in JavaScript
  • JavaScript “yield” Keyword and “function*()” Syntax
  • JavaScript “Set” Object
  • Default Function Arguments Values in JavaScript
  • JavaScript “…” Operator
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license