This JavaScript article tutorial guides you how to master JavaScript array objects with advance JavaScript skills by step by step instructions, simple JavaScript source code and very detailed documentation. In this JavaScript tutorial, you can learn more about forEach, filter, every, some, map, reduce methods to handle JavaScript array objects better. Please go to the inner post page for full details.

• Demo
• Enlarge
• Reload
• New window

Till recently I always used a for-loop when I had to iterate over an array in JavaScript. For example:

var myArray = [1, 2, 3, 4];

for (var i = 0; i < myArray.length; i++) {
    console.log(myArray[i]);
}

However, with ECMAScript 5 the Array object itself got some methods for iteration purposes. With those methods you often can write cleaner code than by using a for-loop. Let�s have a (short) look at those methods. For details, please follow the provided links.

forEach

The forEach() method calls the provided function for each array element. Using forEach(), we can rewrite the example from above to:

var myArray = [1, 2, 3, 4];

myArray.forEach(function (element) {
    console.log(element);
});

filter

The filter() method applies the provided filter function to each array element and returns a new array with all elements for which the filter function returned a true value.

For example, to get only the even numbers of an array we could write the following code:

var myArray = [1, 2, 3, 4];

var evenNumbers = myArray.filter(function (x) {
    return x % 2 == 0;
});
// evenNumbers is [2, 4]

every & some

The every() and some() methods are similar: whereas the every() method only returns true if the provided testing function returns a true value for each array element, the some() method returns true if there is at least one array element for which the testing function returns a true value. You can see the difference in this example:

var oddNumbers = [1, 3, 5, 7];
var mixedNumbers = [1, 2, 3, 4];
var evenNumbers = [2, 4, 6, 8];

oddNumbers.every(isEven); // returns false
oddNumbers.some(isEven); // returns false

mixedNumbers.every(isEven); // returns false
mixedNumbers.some(isEven); // returns true

evenNumbers.every(isEven); // returns true
evenNumbers.some(isEven); // returns true

function isEven(x) {
    return x % 2 == 0;
}

map

The map() method applies the provided function to each array element and returns an array with the results.

For example, to square all values of an array we can do the following:

var myArray = [1, 2, 3, 4];

var squared = myArray.map(function (x) {
    return x * x;
});
// squared is [1, 4, 9, 16]

reduce & reduceRight

The reduce() and reduceRight() methods reduce an array step-by-step to a single value by using the provided function and an optional initial value. It works in the following way: the first two array elements (or the initial value and the first array element) are passed as parameters to the provided function. The result of this function call plus the next array element are then used as new parameters for the function. And so on, until there are no more array elements left.

The difference between reduce() and reduceRight() is that reduce() iterates over the array from left-to-right whereas reduceRight() iterates in the opposite direction, from right-to-left.

Here is a simple example to calculate the sum of the values of an array:

var myArray = [1, 2, 3, 4];
var initialValue = 10;

myArray.reduce(add); // performs 1 + 2 + 3 + 4 and returns 10
myArray.reduceRight(add); // performs 4 + 3 + 2 + 1 and returns 10

myArray.reduce(add, initialValue); // performs 10 + 1 + 2 + 3 + 4 and returns 20
myArray.reduceRight(add, initialValue); // performs 10 + 4 + 3 + 2 + 1 and returns 20

function add(x, y) {
    return x + y;
}

That�s it. I hope I could give you an overview over the available iteration possibilities in JavaScript. Happy coding!

Update 2011-04-02: I found a site by Microsoft where you can test those methods in your browser: ECMAScript 5 Arrays

• Code
• Print

• Comment (0)
• Write

by Preview

Cancel reply

Write your comment

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New