Object spread
When working with basic JavaScript objects, we often need to copy the properties of one object to another, or do some mixing and matching of properties from various objects. In TypeScript, we can use an ES7 technique known as object spread to accomplish this. Consider the following code:
let firstObj: object = { id: 1, name: "firstObj" };
let secondObj: object = { ...firstObj };
console.log(`secondObj : ${JSON.stringify(secondObj)}`);
Here, we have defined a variable named firstObj
that is of type object
and has an id
property and a name
property. We then define a variable named secondObj
and use the object spread syntax of three dots ( ...
) to assign a value to it. The value we are assigning is an object that is made up of the firstObj
variable, that is { ...firstObj }
. The output of this code is as follows:
secondObj : {"id":1,"name":"firstObj"}
Here, we can see that the id
and name
properties and values have been copied into the new secondObj
variable.
We can also use this technique to combine multiple objects together. Consider the following code:
let nameObj: object = { name: "nameObj name" };
let idObj: object = { id: 1 };
let obj3 = { ...nameObj, ...idObj };
console.log(`obj3 = ${JSON.stringify(obj3)}`);
Here, we have define a variable named nameObj
that has a single property called name
. We then have a variable named idObj
that has a single property named id
. Note how we are using the spread syntax to create a variable named obj3
that is the result of combining the properties of nameObj
and the properties of the idObj
variables. The output of this code is as follows:
obj3 = {"name":"nameObj name","id":1}
This output shows us that the properties of both objects have been merged into the obj3
variable, using the object spread syntax.
Spread precedence
When using object spread, properties will be copied incrementally. In other words, if two objects have a property with the same name, then the object that was specified last will take precedence. As an example of this, consider the following:
let objPrec1: object = { id: 1, name: "obj1 name" };
let objPrec2: object = { id: 1001, desc: "obj2 description" };
let objPrec3 = { ...objPrec1, ...objPrec2 };
console.log(`objPrec3 : ${JSON.stringify(objPrec3, null, 4)}`);
Here, we have defined two variables named objPrec1
and objPrec2
. Both of these objects have an id
property; however, objPrec1
has a name
property, and objPrec2
has a desc
property. We then create a variable named objPrec3
that is a combination of these two objects. Finally, we print the value of the objPrec3
object to the console. The output of this code is as follows:
objPrec3 : {
"id": 1001,
"name": "obj1 name",
"desc": "obj2 description"
}
Here, we can see that the spread operator has combined the properties of both original objects into the objPrec3
variable. This new object has all three properties, id
, name
, and desc
. Note that the id
property was common between both original objects, and that the value of 1001
has taken precedence in this case, as it has been taken from the object that was specified last.
Spread with arrays
Interestingly, the spread syntax can also be used with arrays. Consider the following code:
let firstArray = [1, 2, 3];
let secondArray = [3, 4, 5];
let thirdArray = [...firstArray, ...secondArray];
console.log(`third array = ${thirdArray}`);
Here, we have defined two arrays, named firstArray
and secondArray
. We then use the spread syntax to combine these two arrays into another variable named thirdArray
. We then print the value of the thirdArray
variable to the console. The output of this code is as follows:
third array = 1,2,3,3,4,5
Here, we can see that the contents of the two arrays have been combined into the thirdArray
variable. Interestingly, the new array contains the value 3
twice, as it was present in both arrays. Note that this syntax can be used on arrays of any type.
The spread syntax can also appear in any order. Consider the following code:
let objArray1 = [
{ id: 1, name: "first element" },
]
let objArray2 = [
{ id: 2, name: "second element" }
]
let objArray3 = [
...objArray1,
{ id: 3, name: "third element" },
...objArray2
]
console.log(`objArray3 = ${JSON.stringify(objArray3, null, 4)}`);
Here, we have defined two arrays named objArray1
and objArray2
, each with a single array element, that has both an id
property and a name
property. We then create a third variable named objArray3
, which uses object spread to create a third array. Note that we are building the objArray3
array out of the objArray1
array, then adding an element, and then including the contents of the ojbArray2
array. The output of this code is as follows:
objArray3 = [
{
"id": 1,
"name": "first element"
},
{
"id": 3,
"name": "third element"
},
{
"id": 2,
"name": "second element"
}
]
Here, we can see that the objArray3
variable contains all of the elements of both the objArray1
and objArray2
arrays, as well as the element with id : 3
, and name : "third element"
that we injected into the middle of the array using spread syntax.