Looping Through Objects

Posted on Dec 7, 2014

In this post, we will take a look at using a slightly non-traditional way of using a for loop to recursively loop through an object as a list. (I’m not referring to a for ... in loop.) The intent is to change the way you look at using a loop so that you can see it is more versatile than just looping until you hit the end of an array.

Obligatory Context

In arrays, we know that there will be a numeric index, and it is simple enough to evaluate all the values based on the index using a for loop.

With objects, we can do something similar with a for ... in loop.

Object as a List

But what about the case where the object is a list, which contain nested objects? In a list, each nested object contains a reference to the next object.

The reason we only get those results is because the for ... in loop will only access the first level of keys in object.

Fear not, there is another way we can use a for loop to traverse this object recursively.

Why does this work?

A for loop does not have to check against the length of any array or object, though that is how it is so commonly used it may be easy to forget or overlook that point. The way each section of a for loop actually works in English is:

  1. Sets the initial variable
  2. Evaluate a condition to determine if the loop should continue
  3. Perform a task at the end of the loop, usually an iteration

Let’s break that down with each section of our for loop:

1. var node = object
This is just like assigning var i = 0. It sets the initial variable. With objects/lists/trees, it is helpful to think of each object or level as a node. So we have set the first object to be tested to the root node of the object.

2. node
This part may be the most confusing at first glance. What is happening here? We are just checking to see if we have a valid object as our node. Remember, the second part of a for loop just evaluates something to be truthy or falsey. If truthy, the loop continues; if falsey, the loop stops. In this case, it may be helpful to think of it in terms of if we were doing this: if(node) { // continue loop }.

3. node.next
This part is executed at the end of every iteration of the loop. Once we have finished with the current node, we look at the node that is nested inside of our current node, and assign it as the next node to check. This is similar to the traditional i++, except instead of a linear progression, we move a level down into the next object.

So when we get to the third level of the object, which has a next: null, it will evaluate to false and terminate the for loop.

Eloquent JavaScript

This technique was lifted from Eloquent JavaScript, in particular chapter four. Eloquent JavaScript is a fantastic resource, though it can be a bit dry. If you are new to programming and computer science, some of the concepts may be a bit over your head, so take your time to make sure you understand everything before you progress to the next section.

Submit a Comment

Your email address will not be published. Required fields are marked *