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.
