How to Use the Spread Operator (…) in JavaScript?

When working with objects or arrays in javascript, we often need to combine two or more arrays or objects into one.

Before ES6, if you wanted to do this, you have to loop through all the properties in both objects and set those properties on another object, or you could use the method object.assign()

let combinedObj = Object.assign({}, obj1, obj2);

After ES6 we can make this much easier by using the spread operator.

let obj1 = {
    name: "xyz",
    age: 20,
}
let obj2 = {
    color: "blue",
    width: 10,
    height: 20,
    
}
let combinedObj = {
    ...obj1,
    ...obj2,
};

console.log(combinedObj); //{name: 'xyz', age: 20, color: 'blue', width: 10, height: 20}

It will spread the properties and values of each object into the new object that we’re defining.

The new object will have all the properties and values of both obj1 and obj2.

If we want to add new properties along with the combined properties of the objects, we could define them right in the spread-out objects.

let obj1 = {
    name: "xyz",
    age: 20,
}
let obj2 = {
    color: "blue",
    
}
let combinedObj = {
    ...obj1,
    ...obj2,
    type: "rectangle",
};

console.log(combinedObj);

 

What happens if the objects have conflicting properties?

Similar to Object.assign() method, the Object that comes later will override any other values for that key provided by Objects that come before it.

let obj1 = {
    name: "xyz",
    age: 20,
}
let obj2 = {
    color: "blue",
    age: 45,
    
}
let combinedObj = {
    ...obj1,
    ...obj2,
    type: "rectangle",
};

console.log(combinedObj); //{name: 'xyz', age: 45, color: 'blue', type: 'rectangle'}

 

The spread operator can also be used with arrays

The syntax is very similar to the syntax for objects.

let num1 = [2,3,4];
let num2 = [5,6,7];


let combinedNum = [
    1,
    ...num1,
    ...num2,
    8,
    9,
];

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

 

How to use the spread operator with functions?

Using the spread operator we can get all the arguments passed to a function as an array and also pass an array of values to a function as arguments.

 

Pass an array of values to a function as arguments

 let sum = (x, y, z)  => x + y + z;

 let numbers = [1, 2, 3];

 sum(...numbers);

JavaScript will call the sum() function with the elements of the array as arguments.

If we try to pass numbers without …, JavaScript will interpret as we want to pass an array as arguments to a function.

 let sum = (x, y, z)  => x + y + z;

 let numbers = [1, 2, 3];

 sum(...numbers); //1,2,3undefinedundefined

 

Get all the arguments passed to a function as an array

let myFunc = (...rest) => {
    console.log(rest);
}

myFunc(1, 2, 3); //[1, 2, 3]

Leave a Comment

How to? Ask a Question