Javascript iterate over derived array

Question

I'm pretty shocked I can't find an answer to this (maybe there isn't one). Suppose I want to iterate over an array one time. I don't to have to create a variable to iterate with, but it seems that that's what I have to do. Ideally, I'd be able to do something like this:

for (key, val in 'one two three'.split(' ')) {
   console.log(val);
}

However, it seems that you can only get the keys from javascript's for..in syntax. Is there any way to iterate over that array without storing it to a variable first?

Answer 1

About half of all web surfers (as of this writing, the number's going up all the time) are using browsers that natively support ECMAScript5 (e.g., the 5th edition), which has some new constructs for this, including forEach:

"one two three".split(" ").forEach(function(val, key) {
    // do stuff here
});

(Or if you don't need the key variable, just leave it off [e.g., ...forEach(function(val) {...].)

Even if the browser doesn't have it, forEach is one of those features that can be "shimmed" (emulated) entirely correctly even in older browsers, e.g. via es5_shim.js or similar. So just include the shim (or write your own) and happily use it regardless of whether it's natively supported or something you've added. Or you may be using a library that already provides it or an analogue of it (jQuery has $.each, Prototype adds each to arrays, Backbone offers something similar, etc.).

forEach also has the advantage that the loop-specific variables (entry and index) are contained by the iterator function and so you don't pollute the scope in which you're using it. There is a runtime cost, because you have the function call overhead for every array element. But function calls are very fast in real terms (even on IE6, which is a dog), you can be sure that whatever else you're doing in the loop body will completely wash out the added overhead.

With the "older" version of JavaScript (3rd edition), there's nothing built in, you either provide your own function for doing it, or on every loop you declare a variable for the array (as well as an indexing variable and an array entry variable), e.g.:

var array = "one two three".split(" ");
var key, val;
for (key = 0; key < array.length; ++key) {
    val = array[key];
    // do stuff here
}

But again you could provide your own forEach easily enough.

Another construct you can use both in older and newer engines is for..in, which iterates over the enumerable properties of an object. You still end up needing all of the variables, though. Because that means more than just "indexes", you have to add some safeguards:

var array = "one two three".split(" ");
var key, val;
for (key in array) {
    if (array.hasOwnProperty(key) && String(Number(key)) === key) {
        // It's a numeric key and the object itself owns it
        val = array[key];
        // do stuff here
    }
}

...but in this case it doesn't buy you anything. It's useful for when the array is sparse (e.g., has large gaps in it).