JS accessing array and object values - http://stackoverflow.com/questions/9329446/how-to-do-for-each-over-an-array-in-javascript

gistfile1.txt

from: http://stackoverflow.com/questions/9329446/how-to-do-for-each-over-an-array-in-javascript

For Actual Arrays

(See "For Array-Like Objects" below for array-like objects.)

You currently have three options and will soon have two more:

Use forEach and related (ES5+)
Use a simple for loop
Use for-in correctly
Use for-of (use an iterator implicitly) (ES6+)
Use an iterator explicitly (ES6+)
Details:

1. Use forEach and related

If you're using an environment that supports the Array features of ECMAScript5 (directly or using a shim), you can use the new forEach function:

var a = ["a", "b", "c"];
a.forEach(function(entry) {
    console.log(entry);
});
Using forEach on a general-purpose web page still (as of March 2014) requires that you include a "shim" for it for browsers that don't support it natively, because IE8 and earlier don't have it (and they're used by somewhere between 7% and 21% of the global browser users depending on who you believe; that figure is skewed a bit by markedly higher use in China vs. elsewhere, always check your own stats to see what you need to support). But that's easily done (search for "es5 shim" for several options).

forEach has the benefit that you don't have to declare indexing and entry variables in the containing scope, as they're supplied as arguments to the iteration function, and so nicely scoped to just that iteration.

If you're worried about the runtime cost of making a function call for each array entry, don't be; details.

Additionally, forEach is the "loop through them all" function, but ES5 defined several other useful "work your way through the array and do things" functions, including:

every (stops looping the first time the iterator returns false or something falsey)
some (stops looping the first time the iterator returns true or something truthy)
filter (creates a new array including elements where the filter function returns true and omitting the ones where it returns false)
map (creates a new array from the values returned by the iterator function)
reduce (builds up a value by repeated calling the iterator, passing in previous values; see the spec for the details; useful for summing the contents of an array and many other things)
reduceRight (like reduce, but works in descending rather than ascending order)
2. Use a simple for loop

Sometimes the old ways are the best:

var index;
var a = ["a", "b", "c"];
for (index = 0; index < a.length; ++index) {
    console.log(a[index]);
}
3. Use for-in correctly

You'll get people telling you to use for-in, but that's not what for-in is for. for-in loops through the enumerable properties of an object, not the indexes of an array.

Still, it can be useful, particularly for sparse arrays, if you use appropriate safeguards:

// `a` is a sparse array
var key;
var a = [];
a[0] = "a";
a[10] = "b";
a[10000] = "c";
for (key in a) {
    if (a.hasOwnProperty(key)  &&        // These are explained
        /^0$|^[1-9]\d*$/.test(key) &&    // and then hidden
        key <= 4294967294                // away below
        ) {
        console.log(a[key]);
    }
}
Note the two checks:

That the object has its own property by that name (not one it inherits from its prototype), and

That the key is a base-10 numeric string in its normal string form and its value is <= 2^32 - 2 (which is 4,294,967,294). Where does that number come from? It's part of the definition of an array index in the specification, §10.5. Other numbers (non-integers, negative numbers, numbers greater than 2^32 - 2, are not array indexes). The reason it's 2^32 - 2 is that that makes the greatest index value one lower than 2^32 - 1, which is the maximum value an array's length can have. (E.g., an array's length fits in a 32-bit unsigned integer.) (Props to RobG for pointing out in a comment on my blog post that my previous test wasn't quite right.)

That's a tiny bit of added overhead per loop iteration on most arrays, but if you have a sparse array, it can be a more efficient way to loop because it only loops for entries that actually exist. E.g., for the array above, we loop a total of three times (for keys "0", "10", and "10000"), not 10,001 times.

Now, you won't want to write that every time, so you might put this in your toolkit:

function arrayHasOwnIndex(array, prop) {
    return array.hasOwnProperty(prop) && /^0$|^[1-9]\d*$/.test(prop) && prop <= 4294967294; // 2^32 - 2
}
And then we'd use it like this:

for (key in a) {
    if (arrayHasOwnIndex(a, key)) {
        console.log(a[key]);
    }
}
Or if you're interested in just a "good enough for most cases" test, you could use this, but while it's close, it's not quite correct:

for (key in a) {
    // "Good enough" for most cases
    if (String(parseInt(key, 10)) === key && a.hasOwnProperty(key)) {
        console.log(a[key]);
    }
}
4. Use for-of (use an iterator implicitly) (ES6+)

ES6 (currently still being drafted) will add iterators to JavaScript. The easiest way to use iterators is the new for-of statement. It looks like this:

var val;
var a = ["a", "b", "c"];
for (val of a) {
    console.log(val);
}
Under the covers, that gets an iterator from the array and loops through it, getting the values from it. This doesn't have the issue that using for-in has, because it uses an iterator defined by the object (the array), and arrays define that their iterators iterate through their entries (not their properties).

5. Use an iterator explicitly (ES6+)

Sometimes, you might want to use an iterator explicitly. You can do that, too, although it's a lot clunkier than for-of. It looks like this:

var a = ["a", "b", "c"];
var it = a.values();
var entry;
while (!(entry = it.next()).done) {
    console.log(entry.value);
}
The iterator is a function (specifically, a generator) that returns a new object each time you call next. The object returned by the iterator has a property, done, telling us whether it's done, and a property value with the value for that iteration.

The meaning of value varies depending on the iterator; arrays support (at least) three functions that return iterators:

values(): This is the one I used above. It returns an iterator where each value is the value for that iteration.
keys(): Returns an iterator where each value is the key for that iteration (so for our a above, that would be "0", then "1", then "2").
entries(): Returns an iterator where each value is an array in the form [key, value] for that iteration.
(As of this writing, Firefox 29 supports entries and keys but not values.)

For Array-Like Objects

Aside from true arrays, there are also array-like objects that have a length property and properties with numeric names: NodeList instances, the arguments object, etc. How do we loop through their contents?

Use any of the options above for arrays

At least some, and possibly most or even all, of the array approaches above frequently apply equally well to array-like objects:

Use forEach and related (ES5+)

The various functions on Array.prototype are "intentionally generic" and can usually be used on array-like objects via Function#call or Function#apply. (See the Caveat for host-provided objects at the end of this answer, but it's a rare issue.)

Suppose you wanted to use forEach on a Node's childNodes property. You'd do this:

Array.prototype.forEach.call(node.childNodes, function(child) {
    // Do something with `child`
});
If you're going to do that a lot, you might want to grab a copy of the function reference into a variable for reuse, e.g.:

// (This is all presumably in some scoping function)
var forEach = Array.prototype.forEach;

// Then later...
forEach.call(node.childNodes, function(child) {
    // Do something with `child`
});
Use a simple for loop

Obviously, a simple for loop applies to array-like objects.

Use for-in correctly

for-in with the same safeguards as with an array should work with array-like objects as well; the caveat for host-provided objects on #1 above may apply.

Use for-of (use an iterator implicitly) (ES6+)

for-of will use the iterator provided by the object (if any); we'll have to see how this plays with the various array-like objects, particularly host-provided ones.

Use an iterator explicitly (ES6+)

See #4, we'll have to see how iterators play out.

Create a true array

Other times, you may want to convert an array-like object into a true array. Doing that is surprisingly easy: We use the slice method of arrays, which like the other methods mentioned above is "intentionally generic" and so can be used with array-like objects, like this:

var trueArray = Array.prototype.slice.call(arrayLikeObject, 0);
So for instance, if we want to convert a NodeList into a true array, we could do this:

var divs = Array.prototype.slice.call(document.querySelectorAll("div"), 0);
See the Caveat for host-provided objects below.

Caveat for host-provided objects

If you use Array.prototype functions with host-provided array-like objects (DOM lists and other things provided by the browser rather than the JavaScript engine), you need to be sure to test in your target environments to make sure the host-provided object behaves properly. Most do behave properly (now), but it's important to test. The reason is that most of the Array.prototype methods you're likely to want to use rely on the host-provided object giving an honest answer to the abstract [[HasProperty]] operation. As of this writing, browsers do a very good job of this, but the spec does allow for the possibility a host-provided object may not be honest; it's in §8.6.2 (several paragraphs below the big table near the beginning of that section), where it says:

Host objects may implement these internal methods in any manner unless specified otherwise; for example, one possibility is that [[Get]] and [[Put]] for a particular host object indeed fetch and store property values but [[HasProperty]] always generates false.

Again, as of this writing the common host-provided array-like objects in modern browsers (NodeList instances, for instance) do handle [[HasProperty]] correctly, but it's important to test.