Home » JavaScript » Javascript forEach Example

About Dmitry Mishchenko

This year I graduate from Applied Mathematics department of Brest State University. I'm fond of genetic algorithms and my degree work will be about generating timetables. Also I'm keen on programming and web-development, especially Java and Javascript. Now I work as a Java Developer at Java department of VRP Consulting.

Javascript forEach Example

Very often we run in cases when we just have a collection of elements and a necessity to loop through it.

EcmaScript5 suggests a simple forEach() method for such purpose.

So, if you’re tired of writing countless for (var i = 0; i < arr.length; ++i) loops, let’s look how it works.
 
 
 
 
 
 

 
For example, we have an array of numbers and we want to output factorials of its elements

		function fact(n) {
			if (n == 1 || n == 0)
				return 1;
			return n * fact(n - 1);
		}
		[ 0, 1, 2, 3 ].forEach(function(elem) {
			document.writeln(fact(elem)); // outputs 1 1 2 6
		});

In case you need to perform some actions with array object here’s one more way with a little bit different syntax. Let’s say we want to check if an array contains a increasing by one sequense of numbers

		function outputElement(elem, ind, array) {
			if (ind == 0)
				document.writeln('arr[' + ind + '] = ' + elem + "; Sequence started
"); else if (array[ind - 1] == elem - 1) document.writeln('arr[' + ind + '] = ' + elem + "; Larger by 1 than previous
"); else document.writeln('arr[' + ind + '] = ' + elem + "; Sequence failed
"); } [ 0, 1, 2, 4, 5, 6 ].forEach(outputElement);

Also note that undefined elements of an array don’t count while iterating

		var counter = 0;
		[ 0, , 1, , 2, , 3].forEach(function(element) {
			++counter;
		});
		document.writeln(counter); // outputs 4 not 7

This approach works fine with a collection of DOM elements. Let’s suppose we have following structure

	
  • 0
  • 1
  • 2
  • 3
  • 4

So, we can select li elements and iterate over them using following JS code

		function fact(n) {
			if (n == 1 || n == 0)
				return 1;
			return n * fact(n - 1);
		}
		var obj = document.getElementsByTagName("li");
		Array.prototype.forEach.call(obj, function(elem) {
			document.writeln(fact(elem.innerText));
		});

Using forEach one can also iterate over object properties

		var o = {
			first: '0',
			second: '1',
			third: '2',
			fourth: '3'
		};
		Object.getOwnPropertyNames(o).forEach(function(element) {
			document.writeln(element + " = " + o[element]);
		});		

Sometimes you might want to break forEach loop. In this case good practice way is to use every() wich breaks looping when returns false

		[ 0, 1, 2, 3, 4 ].every(function(element, index, array) {
			document.writeln(element);
			return element < 3;
		});

Or, probably, you want to do something with the elements of an array until you find a special element and you will use some()

		[ 0, 1, 2, 3, 4 ].some(function(element, index, array) {
			document.writeln(element);
			return element == 3;
		});

Note, that every() breaks the loop when returning false, otherwise some() does it when returning true

Download
You can download the full source code of this example here: JavascriptForEach

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

I have read and agree to the terms & conditions

 

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments