How to get single array from multiple arrays in JavaScript

In this problem we will understand how to get a single array from multiple arrays and different ways to solve this problem.

We will use three methods to solve this problem: the first method is with the help of the spread operator, second concat method and finally last method using push with the spread operator.

Understanding the problem

We have given two or more arrays and we have to concatenate them in a single array. There can be many arrays given and after concatenating them it should appear as a single array.

Let’s understand with an example below:

In the above example we have given three arrays, array1, array2 and array3 and after combining them we got one single array [2,4,5,6,3,7,1,8,9]. Note here that it is in the same order as we have passed it in the beginning as [array1, array2, array3].

Code for the problem

As we have discussed above we will solve this problem with three methods one by one.

By using spread operator

Spread operator is introduced in javascript ES6. The main operation of a spread operator is to copy a part of an array or all parts of an array into another array. The syntax of the spread operator is denoted by three dots (...). This operator is used when all the elements of an array or object need to be added in a newly created array.

Algorithm

Step 1: Define arrays and assign values in it.

Step 2: Create another array using spread operator and pass both created arrays in it.

Step 3: Return the combined array.

Example

// Define arrays
var name1 = ['Nick', 'John', 'Mili'];
var name2 = ['Peter', 'Abraham', 'Avi'];

//using spread operator
var combine = [...name1, ...name2];
console.log(combine);

Output

['Nick', 'John', 'Mili', 'Peter', 'Abraham', 'Avi']

By using concat method

In javascript, there is a predefined method called concat(). Using this method we can combine multiple arrays in a single array. In the code below we can understand this method. As code illustrates that there are three arrays defined as arr1, arr2, and arr3. Then we have a new array called combinedArray which stores an array after performing a concatenation operation. We can perform concat operation in two ways [].concat(arr1, arr2, arr3) or arr1.concat(arr2, arr3), both of these lines will give the same result.

Algorithm

Step 1: Define arrays arr1, arr2, arr3 and assign values in it.

Step 2: Create another array ‘combinedArray’ and assign value using concat method and add all the arrays we have created in step 1.

Step 3: Return the combined array.

Example

// Define arrays
var arr1 = [100, 200, 300]

var arr2 = [400, 500, 600];

var arr3 = [700, 800, 900];

// Before using concat method 

console.log("Before Merging Arrays");
console.log(arr1, arr2, arr3);

//Using concat method

var combinedArray = [].concat(arr1, arr2, arr3);  // or we can write as arr1.concat(arr2, arr3);

console.log("After Merging Arrays", combinedArray);

Output

Before Merging Arrays
[ 100, 200, 300 ] [ 400, 500, 600 ] [ 700, 800, 900 ]
After Merging Arrays [ 100, 200, 300, 400, 500, 600, 700, 800, 900 ]

By using push and spread operator

In this step we will use a spread operator, which expands all the elements, and then we will add the expanded element to an array using javascript’s predefined method called push.

In the code below, we used the rest parameter in the function combineArrays to receive any number of arguments (…multipleArrays). Then, we used a for loop so that all the arguments passed in the function will expand the array using the spread operator. Finally, we will push the expanded elements to the newly created array called singleArray.

Algorithm

Step 1: Define arrays and assign values in it.

Step 2: Create a function combineArrays and pass arguments to the function using spread operator.

Step 3: Create an empty array called singleArray.

Step 4: Define a for loop to push all the elements from arr1, arr2 and arr3 to singleArray by counting the length of the arrays.

Step 5: Return singleArray value.

Step 6: Now print to see the combined array.

Example

//Define multiple arrays
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = [7,8,9];

//define function to perform merge operation 
function combineArrays(...multipleArrays) {
   let singleArray = [];
   for(let i = 0; i < multipleArrays.length; i++) {
      singleArray.push(...multipleArrays[i]);
   }
   return singleArray;
}

console.log("Single array from multiple arrays")
console.log(combineArrays(arr1, arr2, arr3))

Output

Single array from multiple arrays
[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

Complexity

As we have implemented this problem in three ways, we will discuss the time complexity of each of the following methods one by one.

Firstly we talk about the spread operator method. The spread operator takes almost O(n) time, so in result the overall time complexity of O(n2) for the first method.

The second method will take O(n) time because we have n number of elements in the array.

And in the last method we have used a function called combineArrays in which we are using a for loop. The for loop will run until all the elements of the array get added in a new array called singleArray. So if arr1 length is l, arr2’s length is m and arr3’s length is n so the time complexity will be O(l*m*n) or O(N), where N is the multiplication of l, m and n.

Conclusion

As we have seen above, you can solve the given problem in three different ways. First is by using javascript ES6’s spread operator, second by using predefined function concat, and finally with spread and push method. So there are many ways to solve a single problem.