Iterating Through Object Literals in JavaScript
My Early Days of Dev-y Wev
This article is meant to be a very intro example of how one iterates through object literals. My intention is to enlighten new developers on how to go about iterating, and now why they should use specific methods over another.
I started teaching myself JavaScript almost two years ago. One of the concepts that had limited my ability early on in my experience was the understanding of arrays versus objects in JS. Yes I understood what the data looked like, but not really how to work with the two sets of data in similar ways. I felt like I had ‘mastered’ arrays, and how to iterate through them with a deftly written for loop, but I wasn’t sure how to take that thinking and apply it to Objects.
Since then I have bloomed into an eager junior developer. I have completed my first half year in the industry, and my knowledge has expanded exponentially — specifically my knowledge and love for programming and manipulating data with javascript. The two methods I will show are simple, well known approaches to iterating over Objects, but are often not focused on for beginners.
We’ll be working with some fierce competitors in this example…
Object.Key()-sus
This is my go-to method. I prefer this method to iterating over Objects, but it isn’t perfect. It is the least self-documenting approach to this problem. It requires a knowledge that isn’t implicit. The language looks strange, and requires other information and research to understand. New comers to JS might have a hard time parsing what this .keys() method does.
The Object.keys() method requires you to pass in to it an Object, and from that it will return an array of all the keys in that object. After this, you can begin to use any array method that you’d like to iterate over it and interact however you’d like. You can use a forEach, a map, a filter, or even a reduce!
It’s important to undertand the array methods that you’re using in collaboration with Object.keys(). For example, a .forEach() might be used when you need to perform things based on the array but NOT involving the array. For example, check if a key/value is equal to something, and then create an hmtl node based on that expected key/value.
Using a .map() is used more when manipulating that object, and returning a completely new array based on that object. It’s important to remember that .map() must always return the same amount of entries in the array as it began with.
.filter() and .reduce() are different use cases were you desire for the array to be returned from the object, and you want the entries in that array to be a different length.
If you’re unfamiliar with these array methods, I strongly recommend taking some time looking over them in the Mozilla Developer Network and trying to get a grasp of them. Or better yet, play around with them and see what they do!
Gotchas
There is a slight gotcha to this approach. It is important to remember that the argument passed into the anonymous function in the .forEach method (as shown above) is the KEY of the object. So when using this method, you will have to continue to reference the original object - using they key from the array method.
For … in …
This approach is great for beginners because it is much more clear with its intent in programming. When a more green developer is looking at a for in loop, it is much easier to see what is happening. It looks like this…
As you can see, the output of this method is the exact same. However, the power of the FIRST approach is the array methods (.map/.filter/.reduce) which are able to be used. They allow for more control over the iteration and less coding in the long run. Object.keys() will allow you to manipulate and control your iteration a lot easier, and offer perks like ‘cloning’ the original object/array (because these methods return a new array instead of mutating the original array).
Gotchas
The For in loop also comes with its own gotchas. The for in loop iterates over all enumerable properties. This can lead to unintended effects, and often has to be paired with other Object methods to check the key is indeed one you wish to iterate over (with something like the Object.hasOwnProperty() method).
So which do I use though?
As with most situations, it is important to understand both approaches and use either in the needed situation. Why I favour Object.keys() is it offers more control of the outcome. It offers more flexibility, and with the appropriate method (forEach) can mimic the intention of the for in loop. As for your exploration of these methods, I recommend experimenting with both. You may come to the same conclusion I have, or you may find you like one over the other. Either way, you’re getting more comfortable with iterating over objects and manipulating data like a true wizard person.
-thank you for David Cizek for the above notes