Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use spread operator to join two or more 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.
6K+ Views
