Javascript Append Array to Another

We are using javascript arrays to store a collection of values or elements. There will be a situation to append one array to another. There are several ways to to append array to another in JavaScript, and in this article, we will see some most common ways:

4 ways to append arrays

1.concat() method:

This is one of simplest way to concatenating arrays using the concat() method. In this method, we can create a new array and combine two or more arrays in it.

const arr1 = [3, 2, 1];
const arr2 = [1, 2, 3];
const newArr = arr1.concat(arr2);

console.log(newArr);

1. In this example, we have created two separate arrays with 3 values, ‘arr1’ and ‘arr2’.
2. We created array ‘newArr’ and then concatenated them using the concat() method. Now, the ‘newArr’ contain all the items from ‘arr1’ and ‘arr2’.
3. Then we logged the array ‘newArr’. See the output, both values of arrays ‘arr1’ and ‘arr2’ is displayed.

   // Output: [3, 2, 1,1, 2, 3]

2.Spread Operator

If we put three dots like (‘…’) before arrayName, it is considered as the Spread operator. We can spread the items of an array into a new array using this operator. Let’s see the example below:

const arr1 = ['A', 'B', 'C'];
const arr2 = ['D', 'E', 'F'];
const newArr = [...arr1, ...arr2];

console.log(newArr);

1. In this above example, we have created two arrays ‘arr1’ and ‘arr2’ with separated 3 character values.
2. Then we create another array ‘newArr’ for combining the ‘arr1’ and ‘arr2’ arrays. Then we used spread operator to spread the items of each array into a new array called ‘newArr’.
3. Finally, we log the updated ‘newArr’ to the console, which now contains all the elements from both ‘arr1’ and ‘arr2’. The output would be:

   // Output: ['A', 'B', 'C', 'D', 'E', 'F']

So, like this you can combine more arrays using spread operator. If we concat array using spread operator, we need to put comma between two arrayName.

3.Push and Apply() method

This method can be a little difficult to understand, The push() method adds one or more items to the end of the array, while the match() method calls a function with this value and the arguments provided as an array.

const arr1 = [10, 20, 30];
const arr2 = [40, 50, 60];
Array.prototype.push.apply(arr1, arr2);

console.log(arr1);

// Output: [10, 20, 30, 40, 50, 60]

1. In this code, we have created two arrays ‘arr1’ and ‘arr2’ with separated 3 array of number values.
2. Then we called the ‘apply()’ method on ‘push()’ of the ‘Array.prototype’ object. The ‘push()’ method is used to add new value at the end of array. In this case, the ‘push()’ method appends the elements of ‘arr2’ to the end of ‘arr1’.
3. We used ‘apply()’ method for call function ‘this’ value and arguements provided as an array.
4. Finally, we logged the array ‘arr1’ and it contains all the elements from both ‘arr1’ and ‘arr2’.

4.Push and Spread Operator

In this method, we use the push() method along with the spread operator. The push() method adds one or more items to the end of an array, while the spread operator allows you to spread the items of an array into a new array.

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
array1.push(...array2);

console.log(array1); // Output: [1, 2, 3, 4, 5, 6]

1. In this above example, we have created two arrays ‘array1’ and ‘array2’ separetly.
2. Then we used ‘push()’ method for ‘array1’ and passed spread operator with ‘array2’ as argument. So here, we use the spread operator to pass the items of ‘array2’ as individual arguments to the push() method, which adds them to the end of ‘array1’.
3. Then we logged the ‘array1’ and it have both ‘array1’ and ‘array2’ values.

Conclusion

So, these are the ways to append the array to another in Javascript. Each method has its advantages and disadvantages. The best method to use depends on your specific needs and preferences.