Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to replace elements in array with elements of another array in JavaScript?
In JavaScript, there are several ways to replace elements in one array with elements from another array. The most common approach uses the splice() method to modify the original array in place.
Input-Output Scenarios
Let's look at some common scenarios for replacing array elements:
Array1 = [1, 3, 5, 7, 2, 4]; Array2 = [3, 6]; // Replace first 2 elements of Array1 with Array2 Output = [3, 6, 5, 7, 2, 4]
Array1 = [3, 6]; Array2 = [1, 3, 5, 7, 2, 4]; // Replace all elements of Array1 with Array2 (extends the array) Output = [1, 3, 5, 7, 2, 4]
Using splice() Method
The splice() method modifies an array by removing existing elements and/or adding new elements in place.
Syntax
splice(start, deleteCount, item1, item2, itemN)
To replace array elements, we use splice() with the spread operator (...) to pass array elements as individual parameters.
Example 1: Basic Array Replacement
<!DOCTYPE html>
<html>
<head>
<title>Replace Array Elements</title>
</head>
<body>
<p>Original Array: <span id="original"></span></p>
<p>Replacement Array: <span id="replacement"></span></p>
<button onclick="replaceElements()">Replace Elements</button>
<h3>Result: <span id="result"></span></h3>
<script>
let arr = ["Sharukh", "Khan", "toh", "suna", "hoga"];
let anotherArr = ["Rahul", "naam"];
document.getElementById("original").innerHTML = arr.join(", ");
document.getElementById("replacement").innerHTML = anotherArr.join(", ");
function replaceElements() {
// Replace first 2 elements with elements from anotherArr
arr.splice(0, anotherArr.length, ...anotherArr);
document.getElementById("result").innerHTML = arr.join(", ");
}
</script>
</body>
</html>
Example 2: Replacing with Spread Operator
<!DOCTYPE html>
<html>
<head>
<title>Replace Array Elements</title>
</head>
<body>
<p>Array 1: <span id="array1"></span></p>
<p>Array 2: <span id="array2"></span></p>
<button onclick="performReplacement()">Replace Elements</button>
<h3>Result: <span id="output"></span></h3>
<script>
let arr1 = [6, 31, 8, 21, 20, 22];
let arr2 = ["hello", "numbers"];
document.getElementById("array1").innerHTML = arr1.join(", ");
document.getElementById("array2").innerHTML = arr2.join(", ");
function performReplacement() {
// Replace first 2 elements from index 0
arr1.splice(0, arr2.length, ...arr2);
document.getElementById("output").innerHTML = arr1.join(", ");
}
</script>
</body>
</html>
Example 3: Smaller Array Replaced by Larger Array
<!DOCTYPE html>
<html>
<head>
<title>Replace Array Elements</title>
</head>
<body>
<p>Small Array: <span id="smallArray"></span></p>
<p>Large Array: <span id="largeArray"></span></p>
<button onclick="replaceAll()">Replace All Elements</button>
<h3>Result: <span id="finalResult"></span></h3>
<script>
let arr1 = [6, 31];
let arr2 = [66, 88, 23, 53, 54];
document.getElementById("smallArray").innerHTML = arr1.join(", ");
document.getElementById("largeArray").innerHTML = arr2.join(", ");
function replaceAll() {
// Replace entire arr1 with arr2 elements
arr1.splice(0, arr1.length, ...arr2);
document.getElementById("finalResult").innerHTML = arr1.join(", ");
}
</script>
</body>
</html>
How splice() Works for Replacement
The splice() method takes three key parameters:
- start: Index where to start modifying (0 for beginning)
- deleteCount: Number of elements to remove
- ...items: Elements to add (using spread operator)
When replacing elements, splice(0, replacementArray.length, ...replacementArray) removes the first N elements and inserts the new elements at the same position.
Alternative Approach Using Array.prototype.splice.apply()
For older JavaScript environments without spread operator support:
Array.prototype.splice.apply(arr, [0, anotherArr.length].concat(anotherArr));
Conclusion
The splice() method with spread operator provides an efficient way to replace array elements in place. It modifies the original array and can handle arrays of different sizes seamlessly.
7K+ Views
