Array.forEach() – Introduction

One of the most fantastic feature of JavaScript is that functions are considered as first-class objects. A first consequence of this is that it allows functional programming. One usage of functional programming is to manipulate arrays easily.

ECMAScript 5 has standardized some methods that existed for a while in Firefox :

  • every
  • some
  • forEach
  • map
  • filter
  • reduce
  • reduceRight

Each of these methods can be used instead of a common pattern of imperative programming. For example, the .forEach() method can be used when you are writing the following code.

// Let's assume that 'a' is an array and 'f' a function previously declared
var i, l;
for(i=0, l=a.length ; i<l; i++){
    f(a[i], i, a); // the order of the arguments is the one used in ES5
}

With .forEach :

// Let's assume that 'a' is an array and 'f' a function previously declared
a.forEach(f);

Somehow, each of the “Array extras” is an hidden loop.
Each method has a compulsory argument which is the function (“callback function”) to be called on each array element and an optional argument which is an object used as the this value of the function used as first argument.
Expect for reduce and reduceRight, the function used as an argument can have between 1 and 3 arguments with already defined semantics. The first argument is the element of the array, the second argument is its index and the third, the array being traversed.

Among the advantages of those methods we can find :

  • Smaller code
  • Better abstraction (no need to read all the code to understand that the same treatment is applied to each element)
  • No need for a loop counter. It seems minor, but it means that this JavaScript variable doesn’t need to be allocated and then garbage-collected at the end of its life-time. This should result to better performance.

We will see in a next article that forEach and the other Array methods may not be limited to arrays.
In another article about these methods, I will go further in the idea of “better abstraction” and the different advantages this better abstraction can provide in term of performance.
In a last article, I will provide some code to use at the beginning of an application to be able to use these methods even in an ECMAScript 3 but not 5 compliant environment (like IE all versions, even 9pre)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s