Hazel is a Week 2 student on Northcoders' coding bootcamp, The Developer Pathway!
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:
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 trusty for loop 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-fashioned for loop 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 the for…in loop also works for arrays. Unfortunately, using it for arrays can mess with the indices, which is why the MDN page comes 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.
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 using Array.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? Lodash is a library of ready-made functions which are free to download. Many of them are similar to existing functions such as filter or find, 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…