How to solve problems with the spread operator in JavaScript

The spread operator (...) in JavaScript is a new feature in ES6 JavaScript that can be used to copy all or part of an existing array or object into another array or object. Some problems we might encounter in JavaScript can be solved using the spread operator. In this Answer we're going to cover the following ways you can use the spread operator.

The spread operator can be used to do the following:

  1. To copy an array

  2. To merge arrays

  3. To add items to an array

  4. To find the smallest number in an array

  5. To find the biggest number in an array

  6. To merge objects

  7. To add property to an object

  8. To destructure objects

  9. To pass unlimited arguments to a function

  10. To creating an array from characters in a string

Copying arrays

The spread operator can be used to make a shallow copy of an existing array. We can type the spread operator and then add the variable name of the first array.

Example

let evenNum1 = [2,4,6];
let evenNum2 = [...evenNum1];
console.log(evenNum2);
// [ 2, 4, 6 ]
Using spread operator to copy an array

Merging arrays

If we have two or more arrays that we want to combine into a single array, we can use the concat method. However, the spread operator offers a much simpler approach, like in the example below:

let oddNum1 = [1,3,5];

let oddNum2 = [7,9,11];

let oddNum3 = [...oddNum1, ...oddNum2];



console.log(oddNum3);

// [ 1, 3, 5, 7, 9, 11 ]





// using the .push() method

let evenNum1 = [2,4,6];

let evenNum2 = [8,10,12];



evenNum1.push(...evenNum2);

console.log(evenNum1);

// [ 2, 4, 6, 8, 10, 12 ]

We can choose which array comes first by arranging them differently.

Example

let oddNum1 = [1,3,5];

let oddNum2 = [7,9,11];

let oddNum3 = [...oddNum2, ...oddNum1];



console.log(oddNum3);

// [ 7, 9, 11, 1, 3, 5 ]

Adding items to arrays

We can add one or more items to the array using the spread operator. We just need to add the name of the array to the position that we want it to occupy in the other array.

Example

let num1 = ["two", "three"];
let num2 = ["one", ...num1, "four", "five"];
console.log(num2);
// [ 'one', 'two', 'three', 'four', 'five' ]
Using spread operator to add items to the array

Finding the smallest number in arrays

The spread operator can be combined with Math.min() to find the smallest number in an array.

Example

let numbers = [1,2,3,4,5,6,7,8,9];
console.log(Math.min(...numbers));
// 1
Using spread operator to find smallest number in an array

Finding the biggest number in arrays

The spread operator can also be combined with Math.max() to find the biggest number in an array.

Example

let numbers = [1,2,3,4,5,6,7,8,9];
console.log(Math.max(...numbers));
// 9
Using spread operator to find biggest number in an array

Merging objects

The spread operator can be used to combine two or more objects.

Example

const user1 = {
   name: "Jack", 
   age: 19
   };
const user2 = {
   firstName: "Jamie",
   lastName: "lannister"
   };
const users = {...user1, ...user2};
console.log(users);
// { 
// name: 'Jack',
// age: 19,
// firstName: 'Jamie',
// lastName: 'lannister' 
// }
Using spread operator to merge objects

Adding properties to objects

Fo example, we have a user object with an age property. We can add the age property using the spread operator.

Example

const user = {

   firstName: "Jamie",

   lastName: "lannister"

   };

const users = {...user, age: 23};



console.log(users);

// { 

// firstName: 'Jamie',

// lastName: 'lannister' 

// age: 23

// }
Using spread operator to add property to object

Destructuring objects

The spread operator can be used when assigning variable names to object values. Everything specified after the spread operator will be assigned to the subsequent variable name.

Example

let user = {
   name: "Jack", 
   age: 19,
   country: "India"
   };
let { name, ...details } = user;
console.log(name);  //Jack
console.log(details); // { age: 19, country: 'India' }
Using spread operator to destructure objects

Passing unlimited arguments to a function

If the number of arguments to be accepted in an arrow function is uncertain, we can combine the spread operator and the rest parameter to make this work.

Example

const sumNum = (...args) => {
  let sum = 0;
  for (let i = 0; i < args.length; i++){
    sum += args[i];
  }
  return sum
}
console.log(sumNum(2,7)); //9
console.log(sumNum(3,9,7,5));  //24
Using spread operator to pass unlimited arguments to a function

Creating arrays from characters in a string

We may need to break up a string into individual characters. What we need to do is add the spread operator before the variable name of the string and the spread operator spreads each character and returns an array.

Example

let text = 'Branch';
let text1 = [...text];
console.log(text1);
// [ 'B', 'r', 'a', 'n', 'c', 'h' ]
Using spread operator to create an array from characters in a string





Free Resources

License: Creative Commons-Attribution NonCommercial-ShareAlike 4.0 (CC-BY-NC-SA 4.0)