How to Use JavaScript ForEach Type Commands

Introduction

The notion that there is a JavaScript foreach construct strongly suggests that it was borrowed from another programming language popular with web developers such as PHP, Perl and other languages. The foreach construct in these languages is used to give an easy way to iterate over arrays and objects.

Its usage would be loosely be in the following format from PHP.

foreach (Array as $key => $value){ statements }

The good news is that even though JavaScript does not have a foreach construct, it has similar capabilities through the use of the for…in construct.

Syntax of the JavaScript for…in

The for…in statement iterates through a specified variable over all the properties of an object or an Array (which in itself can also be an object). For each distinct property, JavaScript then executes the specified statements.

The syntax of the JavaScript for…in construct is slightly different from the format used in the PHP example above. A JavaScript for…in statement looks as follows:

for (variable in object) { statements }

Examples of the JavaScript for…in

The following is an example of a real life code snippet that can be used to display months of the year based on an Array and the properties of a car, which are based on an object.

We start off with a single function that will work in both cases scenarios.

function show_properties(obj, obj_index) { var result = "" for (var i in obj) { result += obj_ index + “.” + i + " = " + obj[i] + “
” }

result += “

return result

}

Assuming we have an object called vehicle with the following properties make, color and doors; we would run these properties on the function above and and display the result with this code:

document.write(dump_props(vehicle, “car”));

The result would print out the following result on your web browser:

car.make = Ford

car.color = red

car.doors = 4

Yet without modifying any code within the function, this code can be used to display months of the year. Here’s how.

var months = new Array(“Jan”,“Feb”,“Mar”,“Apr”,“May”,“Jun”,“Jul”,“Aug”,“Sep”,“Oct”,“Nov”,“Dec”);document.write(dump_props(months, “month_index”));

Using the function as above in an Array would produce the following output.

month_index.0 = Jan

month_index.1 = Feb

month_index.2 = Mar

month_index.3 = Apr

month_index.4 = May

month_index.5 = Jun

month_index.6 = Jul

month_index.7 = Aug

month_index.8 = Sep

month_index.9 = Oct

month_index.10 = Nov

month_index.11 = Dec

Best Practices When Using JavaScript for…in

Seeing the JavaScript for..in construct cannot be used anywhere in your program, what would be the best way to construct them? Obviously as stated above, when there are situations where you have objects with several properties or when you have arrays and you need to iterate through each of the elements so as to be able to use them, then the for…in construct plays an important role.

This is so because there are other constructs in JavaScript which can still iterate through an array or object but these require more effort on the part of the programmer. You can compare the pieces of code which produce the same results

_for(var i = 0; i < obj.length;i++){document.write(“month_index.” + i + " = " + obj[i] + “
”);}_as compared to:for(var i in obj){document.write(“month_index.” + i + " = " + obj[i] + “
”);}

The second one is far more simple. Other places where the JavaScript for..in construct is well suited is traversing elements in HTML forms, such as when the number and choices the user can select from such as check boxes cannot be predetermined.

Conclusion

There you have it, a short explanation and code examples to show how to use the JavaScript for…in construct. In this article we have also noted how incorrectly perceived is the notion that there is actually a JavaScript foreach construct.

For more JavaScript code of interest you might want to look at sample code for JavaScript drop down menus and also instructions on how to create a drop down list of the 50 states using JavaScript .