JavaScript 101 - Object and Array Iteration feature image Photo Credit: Dmitry Baranovskiy

Contents

Object vs. Arrays

In JavaScript 101 - Variables we covered the basics of arrays and objects.
The thing to remember is that in JavaScript all of primitive types are also objects. An array is a type of object that has extra functionality specific to arrays. For those of you coming from some of the stronger typed languages, keep in mind that in JavaScript arrays are objects that contain non-associative(numeric keys only) data, and array keys don’t have to be in consecutive numeric order. You can have an array with the keys like [1], [3], [7], [5].

Objects can contain both associative and non-associative data. Which means objects can store and receive data in both array notation testOBJ["key"] and with object notation testOBJ.key as long as the key is non-numeric. For example:

var obj['key'] = "Value";

if (obj['key'] === obj.key){		/* true */
	console.log(obj.key); 		/* Works! */
}

var obj[1] = "Value";

if (obj[1] === obj.1){			/* <-- SyntaxError: Unexpected number '.1'  */
	console.log(obj.1); 		/*** Does NOT Work! ***/
}

Incremental Loop

If you need to loop through the values of an array that the keys are only numeric, mostly continuous (no large gaps between numbers) and/or you need the values to be retrieve in numeric order you will need to use an incremental for loop like the following:

// Linear Array
var myArray = ["aa", "bb"];

//for loop
for (var i=0; i < myArray.length; i++) {
  console.log(myArray[i]);
}

/* Console:
>  aa
>  bb
*/

Objects or Sparsely Populated Array

When you need to iterate over the values contained in an object or a sparsely populated array you will want to use a for in loop. The for in loop iterates over ALL properties of an object or array. This includes not just the properties that you set but also the properties that are part of the prototype. Each iteration you will need to check to see if the current property is not part of the prototype, by using something like the Object.hasOwnProperty() method. Like:

var myObject = {key:"one", key2:"two"};

// for-in loop
for (i in myObject) {
  if(myObject.hasOwnProperty(i)){
      console.log(i)
  }
}

/* Console:
> one
> two
*/

One huge caveat to be aware of when iterating over arrays with for in loop is if the Object prototype has been extended. Those properties will still be iterated over even using the .hasOwnProperty() check like in the previous example. For example:

// Enumeration
Object.prototype.newProperty = "string";

// Object literal
var myObject = {
  field : "myfield",
  mymethod : function(){
      return "hello";
  }
}

// for-in loop
for (i in myObject) {
  if(myObject.hasOwnProperty(i)){
      console.log(i)
  }
}

/* Console:
> field
> mymethod
*/

Some other issues that you need to be aware of is that there is some order inconsistency with properties of arrays and objects when iterating over them with loops like the for in. Some engines order them alpha numerically, some order them by order of input.

ECMAScript5

The good news is there is a light at the end of the tunnel. The ECMAScript5 standards fixes much of this madness. It adds the Object.forEach() method to objects for iterating over object contents. Some considerations are that the forEach() loop is considerably slower than a for in loop, it is not available in IE older than 9, and even in some of the newer IEs the implementation is inconsistent (Damn you IE).

So we just need to wait for IE8 to finally Die then much of this madness can end. Until next time Keep Hacking.


comments powered by Disqus