How to replace elements in array with elements of another array in JavaScript?

Javascript Web Development Front End Technology

The given task is to replace the elements in an array with elements of another array.

Input-Output Scenario

Let’s look into some input-output scenarios. Consider there are there two arrays with elements in it. The first array is having more elements than the second array and we are replacing a part of elements in the first array with the elements from second array.

Array1 = [1, 3, 5, 7, 2, 4];
Array2 = [3, 6];
Output = [3, 6, 5, 7, 2, 4] // elements got replaced

Let’s consider another scenario, where the elements in the first array are more than the elements in second array. The second array elements will fill the first array.

Array1 = [3, 6];
Array2 = [1, 3, 5, 7, 2, 4];
Output = [1, 3, 5, 7, 2, 4]

Using Splice() method

The splice() method will modify or change the items of an array by replacing or removing the elements and also adding elements.

Syntax

Following is the syntax of splice() method,

splice(start, deleteCount, item1, item2, itemN)

We can use the splice() method to replace a part of array elements with elements from another array. But in this scenario we need to pass the elements as parameters, not the array as parameter.

To achieve the above task splice() method except the parameters like (0, anotherArr.Length, 1, 2, 3). We need to create an array with the above parameters and use the apply method to call the splice method with parameters. We also use concat() method to concat both the arrays.

Below is the syntax for the above excepted parameters,

Array.prototype.splice.apply(arr, [0, anotherArr.length].concat(anotherArr));

Example 1

Following is an example to replace elements in one array with elements from another array −


<!DOCTYPE html>
<html>
<head>
   <title>Replace elements in array with elements of another array</title>
</head>
<center>
<body>
   <p id = "para1"></p>
   <p id = "para2"></p>
   <button onClick="fun()"> Click to replace elements</button>
   <h3 id="demo"></h3>
   <script>
      var arr = ["Sharukh","Khan","toh", "suna", "hoga"];
      document.getElementById("para1").innerHTML = arr;
      var anotherArr = [ "Rahul", "naam" ];
      document.getElementById("para2").innerHTML = anotherArr;
      function fun() {
         Array.prototype.splice.apply(arr, [0, anotherArr.length].concat(anotherArr));
         document.getElementById("demo").innerHTML = arr;
      };
   </script>
</body>
</center>
</html>

In the above output, we’ve given arr as first parameter where the [0, anotherArr.length] (all the elements) in second array will replace from the starting index of first array and the concat() method will concat both the arrays.

Example 2

In the example below, we have created two arrays. The first is more elements than the elements in the second array. by using splice() method we have set the index as 0 and passed arr2.length and extacted them with spread(…) operator so the elements will be replaced from 0th index of arr1.


<!DOCTYPE html>
<html>
<head>
   <title>Replace elements in array with elements of another array</title>
</head>
<center>
<body>
   <p id = "para1"></p>
   <p id = "para2"></p>
   <button onClick="func()"> Click to replace elements</button>
   <h3 id="demo"></h3>
   <script>
      let arr1 = [6, 31, 8, 21, 20 , 22];
      document.getElementById("para1").innerHTML = arr1;
      let arr2 = ["hello", "numbers"];
      document.getElementById("para2").innerHTML = arr2;
      function func(){
         arr1.splice(0, arr2.length, ...arr2);
         document.getElementById("demo").innerHTML = arr1;
      };
   </script>
</body>
</center>
</html>

As we can see in the output, the elements got replaced in the first array.

Example 3

In the following example, we have two arrays. The elements in the first array is lesser than the elements in the second array. we have replaced the elements by using splice method. The elements of second array will fill the entire first array because the size of elements in first array is lesser than the second array.


<!DOCTYPE html>
<html>
<head>
   <title>OReplace elements in array with elements of another array</title>
</head>
   <center>
      <body>
         <p id = "para1"></p>
         <p id = "para2"></p>
         <button onClick="func()"> Click to replace elements</button>
         <h3 id="demo"></h3>
         <script>
            let arr1 = [6, 31];
            document.getElementById("para1").innerHTML = arr1;
            let arr2 = [66, 88, 23, 53, 54];
            document.getElementById("para2").innerHTML = arr2;
            function func(){
               arr1.splice(0, arr2.length, ...arr2);
               document.getElementById("demo").innerHTML = arr1;
            };
         </script>
      </body>
   </center>
</html>