Spread and rest operators in JavaScript

Today we will look at how spread and rest operators work in JavaScript. I will share some examples of both and I will use both arrays and objects.

Spread operator

We will start with spread operators. Our first example will be how we can restructure an object and expand the content of it.

We will create an array with cars, and then we will create a new array with the same properties and then add a new property with the total weight of each car model.

const myCars = [
  {
    model: "Tesla",
    weightKg: 1400,
  },
  {
    model: "Volvo",
    weightKg: 1500,
  },
  {
    model: "Volvo",
    weightKg: 2100,
  },
  {
    model: "Tesla",
    weightKg: 1200,
  },
];

const carsWithWeight = myCars.map((car) => ({
  ...car, // All properties from the car object
  totalModelWeight: myCars
    .filter((c) => c.model === car.model)
    .reduce((prev, curr) => (prev += curr.weightKg), 0),
}));

console.log(carsWithWeight);

And the new array looks like this

[
  { "model": "Tesla", "weightKg": 1400, "totalModelWeight": 2600 },
  { "model": "Volvo", "weightKg": 1500, "totalModelWeight": 3600 },
  { "model": "Volvo", "weightKg": 2100, "totalModelWeight": 3600 },
  { "model": "Tesla", "weightKg": 1200, "totalModelWeight": 2600 }
]

So we have taken the original object, and added a new prop to each of them with the total weight of that model. All teslas combined weight 2600 and the volvos 3600. Weird example perhaps... But the important part is that we can create a new object in our map() function, and add the original props with the ...car operation to it and then add additional properties.

Simplier example

If above example was tricky, let's go down to the basics

const person = { name: "Chris", age: 18 };
const extendedPerson = { ...person, favouriteSport: "Tennis" };

Now the extendedPerson object will get all props from person and add an addiotional favouriteSport property as well.

Arrays

It same goes for arrays, let me show you

const numbers = [1, 2, 3, 4, 5, 6];

const moreNumbers = [...numbers, 7, 8, 9];

console.log(moreNumbers); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

Rest operation

Now we will look at the rest operation as well. In this example, we will remove data from our object.

In below example, we will separate the partiallySecretData by using ...rest and also picking out the secretKey from the object.

const partiallySecretData = {
  secretKey: "xyz",
  openData: "this is public information",
  otherStuff: "This can also be shared",
};

const { secretKey, ...rest } = partiallySecretData;

console.log(rest);

{
  "openData": "this is public information",
  "otherStuff": "This can also be shared"
}

The rest operator can be really handy if we know what data we want to directly access and get from the object, and then we can use the ...rest operation to get the rest out and do what we want with it.

Outro

That's it for this guide. I hope you learned how you can use these great operations in your code base. Thanks for reading, and have a great day!

All the best,