How well is the `for of` JavaScript statement supported?

Question

var nameArray = [

{ name: 'john', surname: 'smith'  },
{ name: 'paul', surname: 'jones' },
{ name: 'timi', surname: 'abel' },

];  

for (str of nameArray) {    
   console.log( str.name );

}

I want to know, how supported is for( item of array ) in terms of browser support, mobile JavaScript support - I realize you cannot do greater than > and this is pure iteration?

I have just discovered this, is this as good as I hope it is?

Unprincipled

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… – Caricaria

kangax.github.io/compat-table/es6/#for..of_loops – Woodhouse

Voting to close as too broad. – Hipparch

caniuse.com/#feat=mdn-javascript_statements_for_of – Jeremy

Answer 1

The classic way of doing this is as follows:

  for(var i = 0; i < nameArray.length; i++){
    var str = nameArray[i];
  }

This will give you the exact functionality of a "foreach" loop, which I suspect is what you're really after here. This also gives you the added benefit of working in Internet Explorer.

There is also extensive knowledge of the exact loop described in the MDN. At this time Android web and it seems not everything supports your method so check the compatibility list on that page; seems to be a future release of the new JavaScript that will probably have OOP inside it.

Conceptualism

I don't understand what "OOP" has to do with this. – Divagate

Well, foreach loops in my mind are more the property of OO languages. Also, this shows usefully what version is mentioned, I value the contribution. – Conceptualism

Saying "for each loops are...the property of OO languages" is seriously misinformed. – Divagate

This is wrong. 'For of' is way more reliable than the shown for loop. JS Arrays can have gaps and all sorts of indexes, which are not numeric and not in sequence. – Airmail

Why you talk about Array.forEach() loops? – Oxidimetry

Answer 2

MDN:

While for...in iterates over property names, for...of iterates over property values.

The above is what for...of loop does. The below is its current status.

This is an experimental technology, part of the Harmony (ECMAScript 6) 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.

Pharyngeal

Answer 3

This is the ES6 for..of loop. According to the MDN article i just linked, it's supported by several browsers (see there for exact versions), but not IE. Currently, several mobile browsers also support it.

Cloth

Answer 4

In the meantime, you could use something like this:

for(element_idx in elements) {
    element = elements[element_idx];
    ...
}

for...in has been standard since ECMAScript 1st Edition.

Loireatlantique

'Although it may be tempting to use this as a way to iterate over Array elements, the for...in statement will return the name of your user-defined properties in addition to the numeric indexes. Thus it is better to use a traditional for loop with a numeric index when iterating over arrays, because the for...in statement iterates over user-defined properties in addition to the array elements, if you modify the Array object, such as adding custom properties or methods.' MDN - for...in/arrays – Professional