The spread operator introduced in ES6 is used for unpacking the elements of iterable such as an array. The spread operator has made cloning and merging of the array easy. To learn more about the spread operator, visit JavaScript spread operator.
You must understand that when the spread operator was introduced in ES6, it could not be used with objects. However, later on, ES2018 extended the functionality of the spread operator to objects. So now, you can use the spread operator to perform the following operations on the objects:
The best thing about the spread operator is that it enables developers to copy an object. The process for copying an object is straightforward. First, you have to type opening curly braces, then three ellipses followed by an object you want to clone; in the end, type closing curly braces.
let copiedObject = {...obj};
Let's see an example to understand how to copy an object using the spread operator.
let iPhone = {
name: "Apple iPhone 13",
price: 779,
memory: "128GB",
colors: ["Red", "Pink", "Blue"],
features: {
GPS: true,
bluetooth: 5.0,
voiceAssistant: "Siri"
}
}
let copiedObject = {
...iPhone
}
console.log(copiedObject);
Output
{
name: "Apple iPhone 13",
price: 779,
memory: "128GB",
colors: ["Red", "Pink", "Blue"],
features: [object Object] {
GPS: true,
bluetooth: 5,
voiceAssistant: "Siri"
}
}
It is important to note that the spread operator creates a shallow copy of the object, meaning only top-level properties having primitive values are duplicated. All the nested properties are shared between the copied and original objects.
let iPhone = {
name: "Apple iPhone 13",
price: 779,
memory: "128GB",
colors: ["Red", "Pink", "Blue"],
features: {
GPS: true,
bluetooth: 5.0,
voiceAssistant: "Siri"
}
}
let copiedObject = {
...iPhone
}
copiedObject.price = 750;
copiedObject.colors.push("Black");
copiedObject.features.GPS = false;
console.log("Copied Object");
console.log(copiedObject);
console.log("Original Object");
console.log(iPhone);
Output
Copied Object
{
name: "Apple iPhone 13",
price: 750,
memory: "128GB",
colors: ["Red", "Pink", "Blue", "Black"],
features: {
GPS: false,
bluetooth: 5,
voiceAssistant: "Siri"
}
}
Original Object
{
name: "Apple iPhone 13",
price: 779,
memory: "128GB",
colors: ["Red", "Pink", "Blue", "Black"],
features: {
GPS: false,
bluetooth: 5,
voiceAssistant: "Siri"
}
}
In this example, you can see that the copied object has updated the price property, but that change is not reflected in the original object. On the other hand, when the colors property is modified, that change is reflected in the original object because the colors property has a reference type value.
When the nested property GPS is updated, the change is reflected in both the copied and original objects.
Suppose you want to combine two or more objects. In that case, all you have to do is use three dots before an object variable, which will spread all the properties and values of that object into the new object.
let obj1 = {
x: 1,
y: 2
}
let obj2 = {
z: 3
}
let mergedObj = {
...obj1,
...obj2
}
console.log(mergedObj);
Output
{
x: 1,
y: 2,
z: 3
}
Also, you can add new properties to the object along with the spread-out objects.
let obj1 = {
x: 1,
y: 2
}
let obj2 = {
z: 3
}
let mergedObj = {
a: 10,
...obj1,
...obj2,
b: 15,
c: 20
}
console.log(mergedObj);
Output
{
a: 10,
b: 15,
c: 20,
x: 1,
y: 2,
z: 3
}
There might be a situation when the objects you want to merge have the same key but different values for that key. In that case, the value of that property will be of the last spread-out object.
In this example, obj1 and obj2 both have the same property, x but have different values.
let obj1 = {
x: 1
}
let obj2 = {
x: 2
}
Suppose obj1 is spread last, then the value for the key x in the final object would be obj1's value for that key.
let mergedObj = {
...obj2,
...obj1
}
console.log(mergedObj);
Output
{
x: 1
}
On the other hand, if obj2 is spread last, then the value for the key x in the final object would be obj2's value for that key.
let mergedObj = {
...obj1,
...obj2
}
console.log(mergedObj);
Output
{
x: 2
}
Also, you can add another value for the x property after the spread operators. In that case, it will override the value of the property x of obj1 and obj2.
let mergedObj = {
...obj1,
...obj2,
x: 3
}
console.log(mergedObj);
Output
{
x: 3
}
