Code
Hazel's Blog: Getting Objects to Behave Like Arrays
Hazel is a Week 2 student on Northcoders' coding bootcamp, The Developer Pathway!
If you’d said JavaScript to me two months ago, I might have thought you were talking about the font used on a bag of coffee. Now I spend my days training to be a software developer at the amazing Northcoders bootcamp, and my nights dreaming about closure, spinning through infinite loops or having recurring nightmares about recursion.
While I’m sure in a few months time I’ll look back at this and cringe at my own ignorance, I nevertheless thank you for indulging me as I use you as myrubber duck. As I carve a path through the JavaScript jungle, I strive to gain at least enough knowledge to laugh at my past self’s primitive understanding (and shake my head at my inept attempts at coding puns).
Here are some tricks I’ve learned this week for working with objects that have made me think, “that’s really useful!”
Is it an object?
When working with objects, the first problem you may encounter is establishing whether something actually is one. If you use typeof with an object, it will return ‘object’ — however, it will return the same thing for an array (which is technically a kind of object) and, rather unhelpfully, ‘null’.
There is a handy little method for checking if something is an array or not, and it looks like this:
Array.isArray(obj)
obj is your variable, and you will get a return value of true or false. There’s nothing quite so handy for determining if an object is of the key-value pairstype, so we may need to use the process of elimination.
typeof obj === ‘object’ && !Arr.isArray(obj)
The above should do the trick in most cases, although to be extra thorough you could add:
&& obj !== null
Looping through objects
Looping is the bread and butter of coding, and the trustyforloop is one of the first things new coders learn. And while there are tons of higher order functions that let you loop, there are still times when good old-fashionedforloop is the best tool for the job. “If only it worked for objects too”, you may think.
But it does! The below syntax allows you to loop over each key-value pair in an object:
for (let key in obj)
This is the for…in loop. obj is your object variable and key declares a new variable to represent each key, similar to declaring your element when when using map or forEach. I don’t know about you, but just the fact that it’s a variable declared with let but without = blows my mind a little bit. You can then access the key’s value using obj[key].
N.B. You may, like me, have the thrill of discovering that thefor…inloop also works for arrays. Unfortunately, using it for arrays can mess with the indices, which is why theMDN pagecomes with a big warning about using it for arrays. If the order doesn’t matter to you though, go right ahead and use it for both.
Converting object values to an array
Another Eureka! moment for me was discovering how easy it is to convert an object to an array.
Object.values(obj)
The above creates an array from the object values, which can be great if you want to pass objects and arrays through the same function — simply check whether it’s an array or not usingArray.isArray()described above, and if it’s not,obj = Object.values(obj). Of course, this is only helpful if you don’t need the key names anymore, as these won’t be included.
Higher order functions for objects
There’s nothing a higher order function can do that you can’t recreate, but why go to the effort?Lodashis a library of ready-made functions which are free to download. Many of them are similar to existing functions such asfilterorfind, but allow you to pass it objects as well as arrays, along with a few other perks. There’s also a large section of functions for use specifically with objects. They’re basically the things you’ve wished the standard HOFs did.
Hip hip, array! I mean, object…
Hazel