Pin Me

JavaScript ForEach: Explanation & Examples

written by: S. R. Obbayi•edited by: Amber Neely•updated: 10/5/2010

Contrary to popular assumptions by some budding web developers, the JavaScript foreach construct does not really exist in its current state. So where does this JavaScript foreach construct get it roots from? This short article explains the details and gives some example on how and where it can be us

  • slide 1 of 5

    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.

  • slide 2 of 5

    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 }

  • slide 3 of 5

    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] + "<BR>" }

    result += "<HR>"

    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

  • slide 4 of 5

    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] + "<BR>");}as compared to:for(var i in obj){document.write("month_index." + i + " = " + obj[i] + "<BR>");}

    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.

  • slide 5 of 5

    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.