Table of Contents
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]
Hello there!
I hope you find this post useful!I'm Mihai, a programmer and online marketing specialist, very passionate about everything that means online marketing, focused on eCommerce.
If you have a collaboration proposal or need helps with your projects feel free to contact me. I will always be glad to help you!
