20
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?

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
TheBlackBenzKid
  • 26,324
  • 41
  • 139
  • 209

4 Answers4

18

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.

TheBlackBenzKid
  • 26,324
  • 41
  • 139
  • 209
Gianthra
  • 334
  • 2
  • 9
  • 4
    I don't understand what "OOP" has to do with this. –  Dec 10 '14 at 02:53
  • 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. – Gianthra Dec 10 '14 at 08:57
  • 13
    Saying "for each loops are...the property of OO languages" is seriously misinformed. –  Dec 10 '14 at 09:12
  • 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. – cskwg Sep 01 '21 at 05:29
  • Why you talk about Array.forEach() loops? – Dan Froberg Apr 25 '22 at 20:37
9

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.

Amit Joki
  • 58,320
  • 7
  • 77
  • 95
4

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.

Scimonster
  • 32,893
  • 9
  • 77
  • 89
3

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.

vincent gravitas
  • 354
  • 2
  • 10
  • 5
    '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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#Arrays) – viery365 Jul 26 '16 at 00:47