Use Spread Operator to Join Arrays in JavaScript

Array is a variable. Which has an ability to store multiple values in it using appropriate syntax. Every value is referred with index numbers which will start from 0.

Const ipl = ["Chennai", "Mumbai", Hyderabad"];

Spread operator (?)

Spread operator can do the copying of one object or array's properties and values to another object or array. This will be a shallow copy of the original.

Const ipl = ["Chennai", "Mumbai", Hyderabad"];

Spread operator can do the copying of one object or array's properties and values to another object or array. This will be a shallow copy of the original.

How to use spread operator to join two or more arrays

Spread operator can be used to merge, join values of the array into a new array in immutable way. And will merge at the end of the existing array in mutable way.

const mergeArray = [...array1, ...array2];

Example 1

Joining two Immutable arrays

In this scenario, we are using Spread operator to merge two or more arrays into a new array. It performs immutable way of merging. The merged values of arrays will be returned in another, new array.


<html>
<body>
   <script>
      //creating arrays
      const team = ['Chennai', 'Mumbai', 'Bangalore'];
      const captain = ['Dhoni', 'Rohit', 'Kohli'];
   
      //Merging arrays using (...) spread operator
      const join = [...team, ...captain];
   
      //New array after merging
      document.write(join); // ['Chennai', 'Mumbai', 'Bangalore', 'Dhoni', 'Rohit', 'Kohli']
   </script>
</body>
</html>

Example 2

Joining more than two Immutable arrays

In this below situation, we implemented using spread operator to join more than two arrays into a new array. It is an immutable way of merging. The values after joining will return in a newly created array.


<html>
<body>
   <script>
      //creating arrays
      const team = ['Chennai', 'Mumbai', 'Bangalore'];
      const captain = ['Dhoni', 'Rohit', 'Kohli'];
      const trophies = ['4', '5', '0'];
      
      //Merging arrays using (...) spread operator
      const join = [...team, ...captain, ...trophies];
      
      //New array after merging
      document.write(join); // ['Chennai', 'Mumbai', 'Bangalore', 'Dhoni', 'Rohit', 'Kohli']
   </script>
</body>
</html>

Example 3

Joining Mutable arrays

In this scenario, we use array.push(element) method to push the element at the end of the array. array.push(element) accepts complete array to push into another array using spread operator. It will be a mutable merging, No new array will be created in this merging. It will merge in the existing array.


<html>
<body>
   <script>
      //Creating array
      const bikes = ['Royal Enfield', 'JAWA', 'Ather'];
      const cars = ['Jaguar', 'BMW', 'TATA'];
      
      //Pushing cars array into bikes
      bikes.push(...cars);
      document.write(bikes); // ['Royal Enfield', 'JAWA', 'Ather', 'Jaguar', 'BMW', 'TATA']
   </script>
</body>
</html>

Example 4

Joining more than two Mutable arrays

In this below example, In order to push the element to the end of the array, we use the array.push(element) method. When using the spread operator, array.push(element) takes an entire array to push into another array. we are joining more than two arrays in mutable way. There will not be any creation of new array after merging.


<html>
<body>
   <script>
      //Creating array
      const bikes = ['Royal Enfield', 'JAWA', 'Ather'];
      const cars = ['Jaguar', 'BMW', 'TATA'];
      const airlines = ['AirIndia', 'Indigo', 'SpiceJet', 'Vistara'];
      
      //Pushing cars array into bikes
      bikes.push(...cars, ...airlines);
      document.write(bikes); // ['Royal Enfield', 'JAWA', 'Ather', 'Jaguar', 'BMW', 'TATA']
   </script>
</body>
</html>

Note

We can do merging in JavaScript in multiple ways.

To combine two or more arrays, you can either use the functional method [].concat(arr1, arr2) or the spread operator [...arr1,...arr2]. The merging outcome is kept in a new array, making these methods immutable.

If the output should be in existing array without creating a new array and to perform in mutable merging, then arr1.push(?push2) can be used to get the above desired results.

Updated on: 2022-09-16T14:39:58+05:30

8K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements