Question

I have seen some examples that show that Firefox supports some kind of JavaScript syntax along the lines of *something* if *expression*;.

As an example of what I’m talking about, see this MDN article, which contains the following example:

var evens = [i for each (i in range(0, 21)) if (i % 2 == 0)];

My questions are:

What name would be given to describe this kind of syntax? I mainly want to know this so that I can Google it and read more about it. I have tried Googling the best I can come up with, but haven’t been able to put the right terms together to get helpful results.

Can this syntax exist in other places outside of an array comprehension? I feel like I have seen other examples of this being used outside of an array (such as in the example above), but I am not sure.

Where can I read more about this syntax?

Do any other browsers support this besides Firefox?

Is this feature in ES5 or planned for ES-harmony?

Answer 1

As others have noted, this is called “Array Comprehensions” and it’s one of the many, many features suggested for ECMAScript Harmony:

http://wiki.ecmascript.org/doku.php?id=harmony:array_comprehensions

However, as with pretty much every Harmony “feature”, I don’t think there’s any real notion as to whether it’s going to actually be included in the final release. You can use it in Firefox as part of “JavaScript 1.7” (a nebulous “standard” specification that really only applies to Mozilla-based stuff); however, you’re better off avoiding FF-specific syntax, exspecially when it would cause syntax errors in other browsers.

You can read more about it by doing a Google search for “Array Comprehensions,” but as I mentioned, it’s not a very useful tool due to it’s Mozilla-specific nature.

You can achieve a similar effect without much more code using the reduce() Array method introduced in ES5:

//JavaScript has no "range" function, so let's make one
var range = function (begin, length) { 
    var i, ret = [];
    for (i = begin; i < begin + length; i++) {
        ret.push(i);
    }
    return ret;
};

var evens = range(0, 21).reduce(function (arr, cur) { 
    if (cur % 2 === 0) arr.push(cur);
    return arr; 
}, []);

That might be a little verbose compared to what you were looking for (even keeping in mind that we had to create a range() function). But it’s a relatively compact solution that doesn’t require a lot of “setup” and sticks mainly to the solving of the problem: filtering elements from one array to form a second array.

I was able to reduce it to a one-liner, but it becomes a bit unweildy to maintain, so I decided to suggest the two line version instead. In case you’re interested in the one-liner, here it is:

//Don't forget to define "range()"
var evens = range(0, 21).reduce(function (arr, cur) { 
    return (cur % 2 === 0) ? (arr.push(cur) && arr) : arr; 
}, []);

Again, this is ES5 code. If you want it to work in older browsers, you’ll need to come up with a shim to provide support for Array.reduce(). MDN has one here:

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/Reduce

UPDATE:

Looks like I should have used filter() instead of reduce(). Makes the code much cleaner. Thanks to the OP for suggesting it!

var evens = range(0,21).filter(function (cur) { return cur % 2 === 0; });

Again, filter() is ES5, so you’ll need a shim in order to ensure it will function properly on older browsers.