Object Rest & Spread Operators

[00:00:00]
>> Maximiliano Firtman: Remember the rest and the spread operators we see before, well, from 2018. It's also available on inside objects before we saw them in arguments and arrays. Well, now the same thing can be used within objects. So for example here, I can use this to collect with the rest operator, the rest of the properties.

[00:00:26]
So here, we are mixing here. So remember when you have a code block at the left of an assignment this is a destructuring. So I'm destructuring the object that I have at the right, okay? I'm destructuring here in three objects, A, B, and rest. A will have the A property, B will have the B property, and then it will create another object with C and D.

[00:01:00]
So if I run this, I have an object only with C and D, okay? In this case, I'm using the rest operator over an object with the same idea as we saw before. And talking about the spread operator that is the same operator but used in a different context, we can also combine objects.

[00:01:21]
For example, I can say that I have a combined object that will combine object one and object two into one object that will have all the properties in one object. Remember, these operators are actually making new objects or new arrays. Actually, it's not the operator that's making a new.

[00:01:44]
The new object is because we are using the object literal syntax. That's making a new object. But I'm saying that this is not changing object 1 or object 2. This is just spreading the properties of object 1 or object 2 there. This can be used to create quick decorators.

[00:02:07]
For example, let me remove this. Let's say you have something that is sometimes common. You have for example a to-do, let's say you have a to-do list. So I have a to-do item and a to do item,and a to-do item, you say that it's an object that will contain the title.

[00:02:30]
So I have a to-do item that contains the title that I need to finish the workshop, finish workshop, and if it's done, I will say false. Okay, that's an option. Well, sometimes there is a pattern, a design pattern, known as the decorator pattern that decorates that. So then, I can say I have a decorated to-do item that is gonna be, first I'm going to spread to-do item.

[00:02:56]
So I'm spreading it, and I will add a new property, such as, for example, a DOM element that will be attached to it, an li, whatever. So in this, I'm spreading the other object, and I'm actually making a clone in this case. So this is another object. It's not pointing to the object, okay?

[00:03:17]
So I'm not creating a reference to the object, I'm creating a new one. This is a new object that is spreading these two properties and it's also adding a new one.
>> Maximiliano Firtman: Okay, it's just the same spread and to be honest, that most literature to these days about the spread operators are talking about the array, the arguments, and the objects, it doesn't matter the version.

[00:03:45]
Because again, at one point, we don't care too much about the year of which this was added, okay? We take safely up to ES2022, for example, typically we safely talk about things maybe one to two years before. So if you are in 2030, we will safely say that everything in ES 2028 is there somehow.