How to extend an existing JavaScript array with another array?

Javascript Web Development Front End Technology

In this tutorial, let’s find out how to extend an existing JavaScript array with another array. Before explaining the steps, we need to be aware that there is a requirement for several arrays at various times, and learning the right method can save our coding time. You will find more than four methods to extend an array with another. So, most likely, find an easy-to-remember method in the tutorial.

Using Array push() Method and Spread Syntax

The push() method is extremely useful in adding items to an existing JavaScript array. Moreover, you can pass a variety of different arguments based on the output that is preferred.

The spread operator can be used in this scenario to extend the items from an array with another array.

Syntax

array1.push( ...array2 )

In the above syntax, we are extending the array1 with array2 values.

Algorithm

Step 1 − Create an array.

Step 2 − Create another array that might be added to the previous array.

Step 3 − Use the push() method with the first array.

Step 4 − Mention another array in the brackets.

Example

In this example, we have created two arrays and used the push method to extend the numbers listed in array number 2 in array number 1. You can also use multiple arrays and provide conditions using the “if and else” method.


<html>
   <body>
      <div id = "my"> </div>
      <script>
         const number1 = [1, 2, 3]
         const number2 = [4, 5, 6]
         const text = "New Array is: "
         document.getElementById("my").innerHTML = text + number1;
      </script>
   </body>
</html>

Using Array push.apply() Method

While the push method is commonly used, apply method can also provide similar output. This method will likely consider the mentioned array as the first argument and extend other arguments using the push method.

Syntax

array1.push.apply(array1, array2)

Algorithm

Step 1 − Make a new array of numbers or words.

Step 2 − Create another array that will be used to extend.

Step 3 − Use the apply method with the push one using the array that needs to be extended with another one.

Step 4 − Mention the list of arrays that needs to be added following the correct order.

Example

In the example below, we have used the array.push.apply() method to extend the JavaScript array.


<html>
   <body>
      <h4> Extend JavaScript array Using <i> array.push.apply()</i> method.</h4>
      <div id = "my"> </div>
      <script>
         const number1 = [1, 2, 3]
         const number2 = [4, 5, 6]
         number1.push.apply(number1, number2)
         const text = "New Array are: "
         document.getElementById("my").innerHTML = text + number1;
      </script>
   </body>
</html>

The output of the array is similar to the one we got previously using the Push method. You can also use the prototype with the push and apply the method to get the same result.

Using Array concat() Method

Here we will write four arrays and use the concat() method twice to see how the arrays get extended with another array.

Syntax

array1.concat(array2)

Example

Here is an example of writing JavaScript code using the concat() method. One thing you have to remember is that you have to use “let” or “var” instead of “const” for the array that will be used in the concat method. For instance, here we have used the “number1” array and the “num1” array.


<html>
   <body>
      <h4> Extend JavaScript array Using <i> array.concat()</i> method. </h4>
      <div id="result"></div>
      <script>
         const number1 = [3, 6, 9]
         const number2 = [12, 15, 18]
         num1 = number1.concat(number2)
         const text = "New Array of numbers is : "
         document.getElementById("result").innerHTML = text + num1;
      </script>
   </body>
</html>

Using Spread Operator to Extend an Array

Compared to other methods, the spread operator is easy to remember and makes the code look clear.

Syntax

array1 = [...array1, ...array2]

Example

Here we have used two let variables because the const variable can’t be used for the spread operator method. After running this script, you will find that array “number2” repeats the output of the spread method of array “number1” and the numbers of array “number2”.

The reason is that the array number1 is first assigned with the method, and when it gets used in the second method, it repeats the output.


<html>
   <body>
      <h4> Extend JavaScript array Using <i> Spread Operator. </i> </h4>
      <div id ="result1"></div>
      <div id ="result2"></div>
      <script>
         let number1 = [4, 5, 6]
         let number2 = [1, 2, 3]
         number1 = [...number2, ...number1]
         number2 = [...number2, ...number1]
         const text = "New number are: "
         document.getElementById("result1").innerHTML = text + number1;
         document.getElementById("result2").innerHTML = text + number2;
      </script>
   </body>
</html>

Realizing the desired output before writing the code is the first step. You can get lasting results and use these methods for various websites.

The methods like spread operators and concat() can be used to experiment with arrays and get different outputs. Although these methods look straightforward, you can only make the best use of them through trial and error.