Cleanly iterating over JavaScript objects
Playing
01. Cleanly iterating over JavaScript objects

Episodes

0%
Your progress
  • Total: 5m
  • Played: 0m
  • Remaining: 5m
Join or sign in to track your progress

Transcript

00:00
In this snippet, we are going to talk about iterating over objects in JavaScript. Doesn't sound like much fun, but it's actually pretty cool. So let's go ahead and take a look at how we might iterate over an object.
00:12
I'm going to go ahead and create out a user object inside of here. This wouldn't necessarily be something that you'd iterate over, but occasionally I do find myself iterating over objects, and that's exactly what we're discussing. So let's go ahead and just create a really simple object here with a name and an age.
00:29
The normal way, the traditional old way that we would use, and it's of course still valid, is to use a for in loop. So let's go ahead and say let property in user, which would go ahead and for each of the properties in user, give us the property back, and this is the property name, by the
00:45
way. We can go ahead and log this out. So let's go and log out user property, and just for the sake of seeing what that property is, let's go ahead and add this into here as well.
00:56
So if we give that a refresh, sure enough, we get name is Alex and age is 28. Now this can get pretty dangerous if you're doing something with the properties in here and you have something on the prototype chain of an object. To demonstrate this, let's just comment out this here, and up here I'm going to go ahead
01:12
and create a user function, and this applies regardless of which JavaScript framework you're using or if you're writing vanilla JavaScript, it doesn't really matter. I'm going to go ahead and set this name in here to Alex and this age inside of here to 28 as we did before.
01:30
Now in JavaScript, functions is an object much like most things in JavaScript. So if we just go ahead and log out here, type of user, and we go ahead and say let user equals new user. So we new up this function, which will give us back an object.
01:47
You can see we get the type of object. So we can iterate over this newly newed up user now and we'll get all of the properties for that. As you can see just down here, so that works in exactly the same way.
01:59
Now if you're working with a package or a framework and you are pulling something like this user object in, it might have things on the prototype chain. So for example, let's go ahead and create this out. Let's create a get name method in here.
02:13
Now rather than using an arrow function, which will reference the window, we're going to use a standard function to keep the scope. Let's go ahead and return this name just inside of here. Just for now, let's go ahead and get rid of this and then we're going to go ahead and
02:27
log out user and then we're going to call that get name function and that's going to give us the value Alex as we would imagine. Now where am I going with this? Well, let's go ahead and get rid of this console log here and bring back the iteration over
02:40
each of these properties and give this a refresh. What's happened is we are grabbing all of the properties from the prototype chain as well. So we're seeing this get name function when we probably don't want to use this and you've
02:54
probably seen this before. To get around this, what we would do is we would wrap whatever we're doing with each of these properties and we would use the has own property method inside of here and we give that name in.
03:06
If we give that refresh, sure enough, we solve our problem. Now this whole snippet is about how we're going to do this a little bit more efficiently and that is using object.entries, so the entries method on the object property within JavaScript. So what we do is go ahead and use object entries and we're going to go ahead and pass in the
03:26
user just here. Let's just log this out just so we can see what this gives us. So let's go ahead and pop this inside of here and let's go ahead and give that a refresh. So what we get is an object of two items and this contains the property name and the
03:43
value for both the name and the age. What we can do with this now is a couple of things. There's a couple of ways that we can use this. We could, for example, put this in a for of iteration.
03:55
So we could say const, we could destructure the key and the name that we've just seen from each of them objects of object.entries user. If we go ahead and log out the key and the, well, let's just say key value, that makes sense.
04:10
We see the following. So that works in exactly the same way. So this is a much cleaner way to do this without using the has own property check that we saw before.
04:18
Now you can clean this up even more depending on your preferred style of writing things. You could say object entries and then user and you could use for each on this. So we can go ahead and find this out. We can create a function in here.
04:32
This can be an arrow function and inside of here, again, we can destructure the result of this immediately inside of here so we can grab the key and the value out. And if we just do a console log on the key and the value, we see exactly the same thing. So there we go.
04:47
If we just go back to the previous example where we used has own property, probably should have kept that there. We have now looked at a way to make this a little bit shorter, make it a little bit easier to write and a lot easier to read.

Episode summary

In this episode, we dive into different ways to iterate over JavaScript objects. At first, we create a simple user object with properties like name and age, and explore the classic for...in loop to go through those properties. We also discuss some caveats with for...in, especially how it can pick up properties from the prototype chain—which can lead to accidentally grabbing methods or properties you don't want!

To avoid this problem, we show how to use hasOwnProperty inside the loop so you only get the object's own properties, not inherited ones. But since there's a cleaner and more modern way to do this, we introduce Object.entries(). This method gives us an array of key-value pairs from our object, letting us use a nice for...of loop or even the convenient forEach method with destructuring to access both the key and value in a tidy, readable way.

By the end, you'll see why Object.entries() is the preferred way for most use cases, making your code shorter and easier to understand. If you've ever fumbled with object iteration in JavaScript, this episode shows you the "clean" way to do it!

Episode discussion

No comments, yet. Be the first!