Use These Methods to Iterate Over Objects Easily in JavaScript
Objects are the weirdest method of data collection in JavaScript, and they are likely the most used one, even though you might think that it might be arrays. The core of JavaScript and how we treat data is all about objects.
Everything can be treated as an object in JavaScript. Remember how many methods you have used to manipulate strings, how many arrays methods you have worked with, or how you’ve been creating objects through functions.
I’m not saying that in a fancy way. Create a function, array, and an object, then test if they are instances of an object by using the instanceof operator as I did in the example below. The result will blow your mind.
Objects methods.
The first time I learned how to use objects, I had the question that any JavaScript developer had when they learned about objects — how can I iterate over an object? Well, the answer was using the for in loop. Iterating over an object was a little bit weird and confusing compared to arrays.
Using the for in loop for a beginner would be confusing on the first try, because you’ll mix between getting the values of keys and the names of keys, plus you might fall in the trap of mutating the object while iterating over it.
Built-in objects methods took the burden of writing a for in loop just to get the keys or values of an object, so instead of stocking the values of object properties inside an array using the for in loop with three lines, we can do the same in a single line with the Object.values() method.
Object.values()
The example above uses the Object.values() method to get all the values inside an object, store them inside an array, then iterate over that array using the map() method.
What if we decided to get the keys of an object? Well, this time we’ll use the Object.keys() method in the same way we have used the Object.values() method.
Object.keys()
What if I decided to get both keys and values? Should I get back to the old style with for in loop or what? Nah, object methods have got our back here too. You can use the Object.entries() method, but you should watch out for this one.
Object.entries()
In the example above, we are not getting a single value as we used to do with other methods. This time, we are dealing with a key-value store. So, we’ll end up with an array of arrays, where each internal array contains two items, the first one for the key name, and the second for the key-value as depicted below.
The Object.entries() method is very handy when converting an object to an array.
Final word
Now you have great tools to iterate over complex collections like objects and even transform them into arrays, but try to use them wisely or when they make sense. If they are too complex, you can still count on the for in loop.
