Learn about the difference between iterate and enumerate in JavaScript using for loops.

Steve Vaughn
Jun 23 · 5 min read
A metal structure of loops. Image credit: Unsplash

Today marks the 3rd week since I started my software engineering bootcamp. One of the first scenarios that I got hung up on was working with arrays and objects and feeling frustrated when trying to access information in those data structures.

Once I fully understood the distinction between what is iterable and what is enumerable I became more confident in working with complex data structures. I wanted to write this blog post to further solidify my understanding of this topic as well as hopefully help another software engineering student someday understand the difference.

To start, what is an official definition of these terms? Merriam-Webster gives these definitions:

iterate: to say or do again or again and again
enumerate: to ascertain the number of or to specify one after another

What I take from these definitions is that iteration isn’t as detailed or specific as enumeration. When we iterate, we are repeating something without concern of what that something really is. When we enumerate we look at each thing and gather information about it. Imagine a toy box full of dog toys. If we open the lid and try and count each toy without touching them, we are iterating. If we pull each toy out and count them we are enumerating. Enumerating also gives us a chance to look at each toy and determine what properties each toy has, such as does it have squeakers?

My dog Olivia and all of her toys! #spoiled

What does this mean for JavaScript? We know that objects are a key:value pair of data and arrays are a collection of data. This data can be strings, numbers, booleans, and we can even have an array of objects! To relate back to our working definition of iterate vs. enumerate I think of Objects as being a more specific data structure than arrays. With an object we have a key:value pair (where we give the key a variable name) that we can reference. Whereas arrays are a more simple data structure that we access through their index.

Technically though…an array is actually an object where the key is the index and the value is what we see in the array. You’ll see this in action further down.

Let’s dig into some example using the JavaScript loops for…in and for…of. These loops allow us to either iterate or enumerate over a collection of data.

The for…in loop is used to enumerate. We can use this on objects and arrays.

The for…of loop is used to iterate. We can only use this on arrays.

Think of our toy box analogy. If I want to inspect each toy I need to go in the toy box. If I just want to see the toys, I open it and check the toys of the box.

We can’t iterate over an object because we need to take a closer look at the object to see its properties, and we can’t do that by just opening the toy box and glancing over the toys. Let’s dig into some real coding examples with JavaScript.

An array, and object, and an array of objects

Here we have an array with a collection of various data types (strings, a boolean, and a number), an object with some key:value pairs, and an array of objects. Let’s see what happens to each of these data structures with our different for loops!

When we iterate over the array, we get the values of the array. When we enumerate over the array we get the index of each value. Let’s see what happens with our object!

When we iterate over the object we get an error that says “object isn’t iterable” which makes sense now! When we enumerate over the object we get the keys, but not the values. Interesting…so we looked at the item long enough to see what properties it has, but not well enough to determine the value of those properties. To use our toy box analogy, we saw that each toy has a squeaker, but not how many squeakers it has.

In order to do that, we use a special method called Object.values(), which will return an array of the values of whatever is passed inside the (). We can also use Object.keys() to get the keys, and Object.entries() to get both key and value.

This allows us to take an object, and essentially turn it into an array so then we can iterate over it. It’s important to note that Object.entries() returns a nested array, with the key: value pair separated by commas, not a colon.

What about our arrayOfObjects? What happens when we use our for loops on that?

When we have an array where the value of each array is an object we actually use for…of to return each object. This makes sense when you break it down, but can be confusing when you look at it and ask yourself “how can I get those objects…I must need to enumerate” when you actually need to iterate since the objects are nested in an array. When we use for…in we just get the index of each item in the array.

Hopefully now you have a deeper understanding of how and when to use iteration and enumeration, which will result is less frustration when programming!

CodeX

Everything connected with Tech & Code