Photo by Martin Adams on Unsplash
In this article, we are going to learn about the different use cases of the spread operator (…) in JavaScript.
Merging Arrays or Objects
- In the following code example, extracted the values of the id field from the array of objects.
const fruits = [
{ name: 'Apple', color: 'Red', calories: '52' },
{ name: 'Grape', color: 'Green', calories: '67' },
{ name: 'Pomegranate', color: 'Dark Red', calories: '83' }
];
const veggies = [
{ name: 'Carrots', color: 'Orange', calories: '41' },
{ name: 'Beets', color: 'Red', calories: '43' }
];
const fruitsandveggies = [...fruits, ...veggies];Output
0: {name: "Apple", color: "Red", calories: "52"}
1: {name: "Grape", color: "Green", calories: "67"}
2: {name: "Pomegranate", color: "Dark Red", calories: "83"}
3: {name: "Carrots", color: "Orange", calories: "41"}
4: {name: "Beets", color: "Red", calories: "43"}const empBasicDetails = {
name: "James",
id: 1010
};
const empAdvancedDetails = {
bloodGroup: "AB+"
}
const empDetails = { ...empBasicDetails, ...empAdvancedDetails };Output
{name: "James", id: 1010, bloodGroup: "AB+"}Cloning Array
- In the following code example, displaying the employee details one by one using console.log(). Similarly, we can render the list of elements.
const fruits = [
{ name: 'Apple', color: 'Red', calories: '52' },
{ name: 'Grape', color: 'Green', calories: '67' },
{ name: 'Pomegranate', color: 'Dark Red', calories: '83' }
];
const clonedFruits = [...fruits];Output
0: {name: "Apple", color: "Red", calories: "52"}
1: {name: "Grape", color: "Green", calories: "67"}
2: {name: "Pomegranate", color: "Dark Red", calories: "83"}const empDetails = { name: "James", id: 1010, dob: new Date(1995, 5, 10) };
const clonedEmpDetails = { ...empDetails };Output
{name: "James", id: 1010, dob: Sat Jun 10 1995 00:00:00 GMT+0530 (India Standard Time)}String to Array
- Changing the value of particular field in each object within the array. Here we changed the status field value based on its current value.
const pageName = "CodingSparkles";
const charArray = [...pageName];Output
["C", "o", "d", "i", "n", "g", "S", "p", "a", "r", "k", "l", "e", "s"]Arguements to Array
- Changing the value of particular field in each object within the array. Here we changed the status field value based on its current value.
const printFruits = (...args) => {
args.map(item => console.log(item));
};
printFruits("apple", "orange");Output
apple
orangeReferences
- Spread syntax (…) - MDN