00:00 Let's jump in. Alright. We've got our user type, ID, email, name, settings, theme, all that stuff. So we've got, like, sub objects here, which is kinda cool. And we've got our user, user one, Alice, Alice at example, etcetera, etcetera, etcetera.

00:13 So So we're gonna create an updated user. We want to have a user just like this one except with a couple properties that are different. So we're gonna have our updated user. It's gonna be a user type. Again, you don't always have to specify that.

00:26 But we're we're able to specify it. It's fine. We're gonna spread all the properties from the user, but we're gonna specify email. So we're effectively making a new copy of the user. So that's what this part does.

00:38 That's we're making an object. We're gonna take all the properties from the user object. We're gonna spread them across on this new object we're making. And then we're going to, on top of that, spread across Well, we're not actually spreading anymore. We're just setting the email to be alice.

00:55 Newexample dot com. And so what this does is it takes all the properties here and copies them over to this new object but then email is defined over here but we're defining it after we've spread it. So we spread it and then we're like, actually I'm gonna take that email and I'm gonna set it to something specific. And so we're over effectively overriding the email that comes from the original user. So let's actually export that.

01:21 We're gonna get an error here. So I'm gonna, copy this. Actually, you know what? Just for the purposes of this, I'll just stick an export right here. There we go.

01:29 Updated user. So if we take a look at that, we've got ID, Alice. Email is alice..new@example. K. So we're getting everything that we are expecting out of that.

01:38 So that's good. Let's continue. We've got our, yeah. Oh, and one other thing I wanted to mention, that, or just like preview, is that this settings object right here is not exactly a copy. It's more of a reference, a copy to the reference.

01:57 So this object right here is the same one as this object right here. And that can cause some problems sometimes. So we'll we'll talk about that here in a bit. Okay. Great.

02:07 So we've got our config, API URL, time out, and retries. Here's our default config, which is that config. User config overrides some properties, not all of them. So we're gonna take that default config and, create a final config out of the user config. So user config is just overriding the time out.

02:26 So I'm gonna say default config plus the user config. And, the order actually matters. So we're exporting this one. If we look at the final config, see API URL is the API example, time out and retries. You see that the time out has been overridden, from 5,000 to 10,000.

02:45 Oh, here's a pro tip. We don't have a lesson for this, but fun syntax pro tip. If you're looking at this and you're like, is that 10,000 or 1,000? Well, there's something you can do and that is add an underscore. And you can add actually add underscores anywhere you like in a number and it will just be ignored.

03:01 So it's useful for, just being able to read the number a little bit nicer. I don't personally do that a whole lot because normally if I'm do talking about time, then I probably do 1,000 milliseconds times ten seconds. That's how I would represent ten seconds. But, yeah, sometimes sometimes I'll toss a little underscore in there for fun. Anyway, the the important thing to call out here is that, the time out is being overwritten in the default config.

03:30 But if we were to switch these, default config. There we go. You'll notice now the time out is not being overridden. So the values in the user config, that'll include a time out, but then it gets overridden by the time out that's in the default config because the default config comes second. So whatever comes second ends up winning in the event of a conflict.

03:53 And it's actually kind of interesting. You notice that, before let's go back there. We have API URL as the first property of the object and then time out. But after, time out actually comes first. And the interesting reason for that is because when we're making this object, it says, okay.

04:10 I'll take all the properties of the user config. Boom. It's just got a time out. Great. And then, we take all the properties of the default config and add them.

04:18 And when it runs into the time out, it's like, oh, okay. Yeah. We'll just override the time out. Well, that one came first. So that's I don't think that that's actually in the JavaScript spec which is called ECMAScript.

04:30 I don't think that's in the ECMAScript spec that it's supposed to behave that way. As far as I know, it's not. But, it's interesting that it does behave that way in this browser. Okay. Great.

04:42 We're making good progress here. Now let's create a user with dark mode. We've got our user. We're gonna spread all the user. And then we have our settings.

04:50 We're gonna spread the user settings. So here, I'm, the AI, it's it knows what we actually need to do, but I'm gonna get rid of this. And I'm just gonna say, hey, I just wanna override the settings. Well, TypeScript doesn't like that much. Here, let's export this so we can see.

05:06 The end result works like it's gonna run. TypeScript doesn't like it though and the reason it doesn't like it is because of what I'm about to show you. So what happens here is the user properties are getting spread across and then we're gonna override the settings properties. But we're not, like, combining the existing settings that we have right here with this user. We're actually overriding the entire object.

05:30 And so this is no longer a user object because we only have the dark mode theme. We're overriding the entire object. We're not, like, doing some kind of deep merge of, like, oh, that's an object. Well, let's just merge all these properties. So you do have to manually say, oh, well, for this object, if you wanna override it, you have to either override the whole thing or you have to bring in the, settings from the original user.

05:55 So we're gonna say spread the user settings and we're gonna override the theme. And that will take care of TypeScript, that will take care of us, and we're a lot happier now. The other thing I wanted to show you here, is, I want you to take a look at the updated user. In fact, we'll put the the console log right up here. So I kinda previewed this a little bit, but if we do a console log, updated user dot, email is triple equal to the original user email, we're gonna get a false there.

06:28 That makes sense. Right? Because we changed the email. And we over overwrote that. Settings or actually here, let's look at name, should equal name, and that should be true.

06:39 Right? We did not override that. The interesting thing about settings, though, settings will also be true. You can see that right here. But, when when we're talking about a primitive value, of course, it's gonna be equal.

06:54 That's like saying console dot log, Alice equals Alice. Right? That makes sense. Alright? But when we're trying to do objects, if I were to do the same thing with an object, those two objects are triple equal.

07:12 Wow. This is not liking that at all. Yeah. Oh, because yeah. Exactly what I'm telling you.

07:18 In this case, those are gonna triple equal, as false. Like, they do not equal each other because they are two distinct objects in memory. One object is sitting over here. This is one basket and here's another basket. So when you're talking about just a string of characters, yeah, that's that's just what it is.

07:34 It's not a basket. It's just like that's what it is. But when you're talking about objects, you can have multiple objects that all look exactly the same, but they are actually different things. And so when we try to do a triple equals on them, we're gonna get, false every time. So what, why this matters is because the updated user dot settings triple equals the user settings.

07:57 And what that means is if I say, updated user settings theme dark, then we look at the updated, updated user, settings theme. Of course, you would expect that to be dark because I just updated it. But look at this. If the user settings oh. So I just made a copy of the user.

08:24 I made a copy of that user, and I brought all of their settings over, but I didn't copy their settings. Right? I didn't make a copy of the settings. I have a settings property that points to the same object. And so, if I mutate or make a change to the updated user settings, that's also gonna change the original user settings.

08:43 So this is a danger point that you just have to be aware of when we're talking about objects and what we call referential equality. Is that these things will just sometimes that you'll run into a situation where you have two variables that are pointing to the same thing and modifying one through this variable will actually modify the value that this one is pointing to as well. And so when we're talking about doing this spread action, we are not making a deep copy. We're just making a copy of all the properties. So if you wanted a deep copy, then you will do what we are doing below here, which is, to make a copy of the user settings.

09:21 Now, what if I wanted a copy but I didn't wanna override it? Well, then you can just do this. And that will do a copy. And if you look at that, we'll see we have dark, we have light. If we say console dot log, there are settings that is gonna be false.

09:35 We have a different version of that object. And here's the rub. What if settings has a property which is also an object and that one had an object and object. And it just keep going down forever. You just have so many objects.

09:47 Do you wanna really have to do this? No. You don't. You're gonna write a utility function that will help you do that or just use one on the Internet. They're just like really small small functions.

09:57 Not not that hard. But it's just something to keep in mind, when you're talking about spread of objects is you're not actually necessarily, when you copy properties from one object to another, you're copying just the shallow properties, not any sub objects that live underneath them. Okay. Great. Hopefully, that was all interesting and useful to you.

10:22 It just blew up because I messed all sorts of things up because we have these exports. It really doesn't matter because we're about to be done right now, but I'm gonna fix it anyway. Ta da. There it is. Alright.

10:32 Thank you so much for, enjoying this, nice toast with object spread butter on it, and we'll see you in the next one.