JavaScript Loops: for…in vs for

by

Don’t use for..in for Array iteration.

It’s important to understand that Javascript Array’s square bracket syntax ([]) for accessing indicies is actually inherited from the Object…

obj.prop === obj['prop']  // true

The for..in structure does not work like a more traditional for..each/in that would be found in other languages (php, python, etc…).

Javascript’s for..in is designed to iterate over the properties of an object. Producing the key of each property. Using this key combined with the Object‘s bracket syntax, you can easily access the values you are after.

var obj = {
    foo: "bar",
    fizz: "buzz",
    moo: "muck"
};

for ( var prop in obj ) {
    console.log(prop);      // foo / fizz / moo
    console.log(obj[prop]); // bar / buzz / muck
}

And because the Array is simply an Object with sequential numeric property names (indexes) the for..in works in a similar way, producing the numeric indicies just as it produces the property names above.

An important characteristic of the for..in structure is that it continues to search for enumerable properties up the prototype chain. It will also iterate inherited enumerable properties. It is up to you to verify that the current property exists directly on the local object and not the prototype it is attached to with hasOwnProperty()…

for ( var prop in obj ) {
    if ( obj.hasOwnProperty(prop) ) {
        // prop is actually obj's property (not inherited)
    }
}

(More on Prototypal Inheritance)

The problem with using the for..in structure on the Array type is that there is no garauntee as to what order the properties are produced… and generally speaking that is a farily important feature in processing an array.

Another problem is that it usually slower than a standard for implementation.

Bottom Line

Using a for...in to iterate arrays is like using the butt of a screw driver to drive a nail… why wouldn’t you just use a hammer (for)?

More Related Contents:

  1. adding array elements with for loop JavaScript
  2. Loop through an array in JavaScript
  3. Why is using “for…in” for array iteration a bad idea?
  4. What is the difference between ( for… in ) and ( for… of ) statements?
  5. Remove items from array with splice in for loop [duplicate]
  6. Check if object value exists within a Javascript array of objects and if not add a new object to array
  7. Why is the loop assigning a reference of the last index element to? [duplicate]
  8. How do I group items in an array by date?
  9. JavaScript – Nuances of myArray.forEach vs for loop
  10. Two arrays, where items in array x can be in array y but not vice versa, test all permutations
  11. push() a two-dimensional array
  12. Javascript: hiding prototype methods in for loop?
  13. Sum values from an array of key-value pairs in JavaScript
  14. Difference between ( for… in ) and ( for… of ) statements?
  15. Sort array of objects by string property value
  16. How to determine if Javascript array contains an object with an attribute that equals a given value?
  17. How to remove item from array by value? [duplicate]
  18. How to detect if a variable is an array
  19. Undefined values in Array(len) initializer
  20. Filtering an array with a function that returns a promise
  21. Why does 2 == [2] in JavaScript?
  22. Javascript algorithm to find elements in array that are not in another array
  23. Using promise function inside Javascript Array map
  24. What does $(selector)[0] mean in jQuery?
  25. Change the value of an array changes original array JavaScript
  26. Splicing a Javascript array from within the callback passed to forEach
  27. javascript: convert two dimensional array to array of objects using the first ‘row’ to define properties
  28. Create array of all integers between two numbers, inclusive, in Javascript/jQuery
  29. Adding text to beginning of each array element
  30. Handling multiple files from an input element in an array with Google Apps Script

Leave a Comment