Check out a free preview of the full JavaScript Performance course

The "Optimizing Objects" Lesson is part of the full, JavaScript Performance course featured in this preview video. Here's what you'd learn in this lesson:

Steve experiments by feeding similar objects to a function as well as then again with sending different types of objects to the same function and measuring the performance implications.

Preview
Close

Transcript from the "Optimizing Objects" Lesson

[00:00:00]
>> Steve Kinney: So let's go back and let's do a few more experiments.
>> Steve Kinney: Let's take a look, I have one called classes, that seems useful. And so you can see we have another one of these hidden VA special functions, and this one is called HaveSameMap. Right, which is, do they have the same shape?

[00:00:20]
Are the two of them monomorphic, right? So let's go ahead and let's try this code. And so it will crash if I don't use that allow-natives-syntax thing. So I'll say node,
>> Steve Kinney: allow-natives-syntax Say classes.js And how did I get false? Which makes sense, one of them has an a property, one of them has a b property, they are not the same.

[00:00:47]
All right cool, what if they were the same? True, all right, like their sanity in the world, we know that everything is gonna be okay. All right, so does the value matter?
>> Steve Kinney: Let's check it out. Right, that value clearly made it something different but that's a pretty large number.

[00:01:17]
Let's use use a more like fair number. Now it's true. I will spoil that one now just so you don't have to live with that lingering doubt in you until I explain it later. Which is, after you pass a 32 bit integer, it's not the same small number anymore.

[00:01:36]
Like, after a certain size, they are a different type. Right, but if you keep, if you're under a 32 bit number like, if you keep your numbers small, they are the same type. We'll look at a little chart and it'll make a bunch of sense later. But, yeah, so generally speaking, the values have to be the same, clearly if this was a string, we can expect false, right?

[00:01:57]
So, the center with a very long number but in the range of normal numbers like five 50,000, it's true, right? They're the same. All right, cool. What happens if we give this one like a x property?
>> Steve Kinney: False, right? They're not the same. They don't have the same shape anymore.

[00:02:18]
One of them has an x property, one of the doesn't, right? So it seems like V8 has in some way that it's keeping track of this cool. What if they had the same? So given X, an A and an X. [NOISE] Okay. True that's what we would expect.

[00:02:37]
They have the same properties. They are the same values right? Is some amount of sanity in the world. But what happens, let's get to the same place. So the first one is gonna have an A and an X, the second one is gonna have an A. We'll add an X to it.

[00:02:57]
So that should be the same thing right?
>> Steve Kinney: It's not. Interesting, so if they start the same, if I'm making the exact same way, they're the same. But if I start differently, they don't end up the same, interesting. What happens if I do the same thing, like what if I go ahead and say like S [SOUND], they follow the same path.

[00:03:33]
So, we’ll set the x property on both them to numbers. They’ll start out as just an A property. We’ll set an x property on both of them, right? Now they’re the same the map again. Okay so they start the same the same, they start different and end up the same they are not the same.

[00:03:50]
But if they go through the same path together, they are the same. Okay, I don't understand how this works yet, but I'm just doing some science. All right we'll one more thing We'll start out with this a and we'll use our good friend object out assign. Object out assign is used for making objects.

[00:04:12]
And what we'll do is we'll just take the a and we'll copy it, right? If you ever want to keep immutable data structures and react you can use object out assign. Or if you ever used a spread operator, like those three dots, that's to battle it's object that assigned.

[00:04:29]
It's a useful for cloning objects, right? False, isn't that a clone? I guess because we started with this object and then we added all the properties, it went down a different path. That's what I'm guessing, we'll see. All right, But what happens if did const c,
>> Steve Kinney: And we'll see are b and c the same?

[00:04:56]
>> Steve Kinney: They are, cuz they were created in the same way, right? So there's something about how it was created, the path that it went down as it was modified. The properties are added in the same order. It seems like they do have the same map. The properties that end up the same but they are put there in a different order, seems like they don't have the same map.

[00:05:16]
Right, we don't have the words to figure out why this is happening yet. But we're definitely empirically noticing things. All right, No more tricks with object assignment. I'll just show you one that should be pretty straight forward. We'll make our point class from before.
>> Steve Kinney: This.x- x; this.y=y; Very cool.

[00:05:46]
And we'll say A is new Point 1.2, and B is new Point, and we'll take a lucky guess. Are these gonna be the same? You don't all have to answer at once.
>> Steve Kinney: Lucky guesses. I see nodding. I'm gonna take the nodding as same, I heard a same.

[00:06:12]
We're ready, we've voted this entire room same. We win, right? Yeah, they're constructed the same way, they go through a constructor. Cool, right? So it looks like objects that either start the same or go through the same process of being made and not be the same. Even if they end up the same they went through a different path.

[00:06:31]
Like V8 doesn't seem to believe they are the same object. Which is kind of interesting, cool. And if we were to set one of these properties to undefined, like the same thing. They would no longer have the [INAUDIBLE]. You modify either one of these they end up not having the same map.

[00:06:49]
Back and forth, right? But if you were to do the same thing to both of them, they do, right? We could go through that, I'll spare you the march of death through every kind of combination of everything that we've seen. Okay, that's really interesting. If only we knew what was happening.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now