TypeScript Object Spread

Introduction

This article will explore using the ES7 technique known as object spread.

• It can be used in many ways, like copying and manipulating multiple objects.
• It can also be used in arrays to combine arrays or insert elements at specific positions.
• If interested, sit back and get your IDE or text editor ready.

Okay, let’s get started.

What is Object Spread?

If you’re working with JavaScript, you have probably worked with basic objects where we need to copy the properties of one object to another or mix and match properties from various objects.

In TypeScript, this technique is known as object spread.

Although there are various ways to use object spread in TypeScript, not only can you copy objects, but you can also combine multiple objects.

Let’s see them in action one by one.

Copy Object

Let’s see an example below.

let customer = { id: 1, name: "Jose" };
let customer2 = { ...customer };

console.log(`${JSON.stringify(customer)}`);
console.log(`${JSON.stringify(customer2)}`);

In the example above, we defined a customer variable, an object with an id and name property.

We then define a variable named customer2 and use the object spread syntax of three dots (…) to assign value to it.

Now, let’s see the sample output below.

The sample output shows that the ID, name properties, and values have been copied into the customer2 variable.

Combine Multiple Object

We can also use this technique to combine multiple objects.

Let’s see an example code below.

let dog = { legs: 4, name: "bruno"};
let cat = { color: "black", breed: "persian"};

let animal = { ...dog, ...cat};

console.log(`${JSON.stringify(animal)}`);

From the example above, we defined a variable named the dog with legs and name property.

We then have a variable cat that has a color and breed property.

Then, we used the spread syntax for the variable animal to combine the properties of dog and cat variables.

Now, let’s see the sample output below.

Spread Precedence

When it comes to objects’ properties, they will be copied incrementally.

Let's say two objects have a property with the same name, and then the object specified last will take precedence.

Let’s try the example below.

let customer = { id: 1, name: "Lex Luthor"};
let customer2 = { id: 2, name: "Bruce Wayne"};

let customer3 = { ...customer, ...customer2 };
console.log(`${JSON.stringify(customer3)}`);

Let’s see the output.

From our example above, we have defined two variables: customer and customer2.

Both objects have an id property and name property. We then combined these two objects using the customer3 variable.

As a result, the new object has all the properties, and the name, which has the value of “Bruce Wayne,” has taken precedence.

Spread with Arrays

We can also use the spread syntax with arrays.

Let’s try to see a sample code below.

let heroes = ['Batman', 'Superman', 'Flash', 'Captain America'];
let heroes2 = ['Wolverine', 'Gambit', 'Beast', 'Captain America'];

let heroes3 = [...heroes, ...heroes2];
console.log(`${JSON.stringify(heroes3)}`);

From the example above, we have defined two arrays: heroes and heroes2.

We then use the spread syntax to combine these two arrays into another variable named heroes3.

Let’s try to see the output below.

I think you also saw that “Captain America” in the new array contains that value twice because it was present in both arrays.

Another thing to be aware of is that spread syntax in arrays can also appear in any order.

Please see the code below.

let cars = [ { make: "Honda", model:"Civic" }];
let cars2 = [ {make: "BMW", model: "X1"}];

let cars3 = [
    ...cars,
    { make: "Toyota", model: "Altis"},
    { make: "Suzuki", model: "Jimny"},
    ...cars2
];

console.log(`${JSON.stringify(cars3)}`);

From our example, as you can see, we have built the cars3 out of the cars and cars2 array.

Please see the output below.

Conclusion

We have explored the usage of object spread from copying objects, object manipulation spread precedence, and how we can use it with arrays, which I hope gave you a good understanding.

I hope you have enjoyed this article, as I have enjoyed writing it.

Until next time, happy programming, and good luck with your career!