JavaScript Array Iteration

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.


Sampled by © JavaScriptBank.com

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

Language
Translate this page to English Translate this page to French Translate this page to Vietnamese

Recent articles
The Possible Working Methods of Python Ideology
JavaScript Research Paper: 6 Writing Tips to Craft a Masterpiece
Learning How to Make Use of New Marketing Trends
5 Important Elements of an E-commerce Website
How To Create A Successful Prototype For Your PCB
WordPress Landing Page Conversion Essentials to Convert More
4 Development Hacks To Make Your Website Launch A Success
Why Data Recovery Software and Services are Important
Why Engineers Specializing in DevOps Are the Wave of the Future
The Ultimate Checklist for HTTP to HTTPS Migration


Top view articles
65 Free JavaScript Photo Gallery Solutions
Top 10 Beautiful Christmas Countdown Timers
Top 50 Most Addictive and Popular Facebook mini games
Best Free Linux Web Programming Editors
Top 10 Free Web Chat box Plug-ins and Add-ons
50+ Beautiful Resources of HTML Form using CSS and JavaScript
Top 10 Best JavaScript eBooks that Beginners should Learn
The Ultimate JavaScript Tutorial in Web Design
HTML5 Web Workers Multithreading in JavaScript
Learn more about JavaScript Inheritance with Tiny JavaScript Example Codes


Free JavaScript Tutorials & Articles
at www.JavaScriptBank.com