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 extend an existing JavaScript array with another array?
In this tutorial, let's find out how to extend an existing JavaScript array with another array. There are multiple methods to accomplish this task, and choosing the right one depends on whether you want to modify the original array or create a new one.
Using Array push() Method with Spread Syntax
The push() method adds elements to the end of an array and modifies the original array. When combined with the spread operator, it can extend an array with all elements from another array.
Syntax
array1.push(...array2)
Example
This method modifies the original array by adding all elements from the second array:
<html>
<body>
<h4>Extend JavaScript array using push() with spread operator</h4>
<div id="result"></div>
<script>
const number1 = [1, 2, 3];
const number2 = [4, 5, 6];
console.log("Before:", number1);
number1.push(...number2);
console.log("After:", number1);
document.getElementById("result").innerHTML = "Extended Array: " + number1;
</script>
</body>
</html>
Before: 1,2,3 After: 1,2,3,4,5,6 Extended Array: 1,2,3,4,5,6
Using Array push.apply() Method
The push.apply() method is an older approach that achieves the same result as the spread syntax. It applies the push method with an array of arguments.
Syntax
array1.push.apply(array1, array2)
Example
<html>
<body>
<h4>Extend JavaScript array using push.apply() method</h4>
<div id="result"></div>
<script>
const number1 = [1, 2, 3];
const number2 = [4, 5, 6];
number1.push.apply(number1, number2);
document.getElementById("result").innerHTML = "Extended Array: " + number1;
</script>
</body>
</html>
Extended Array: 1,2,3,4,5,6
Using Array concat() Method
The concat() method creates a new array by combining existing arrays. Unlike push(), it doesn't modify the original arrays.
Syntax
const newArray = array1.concat(array2)
Example
<html>
<body>
<h4>Extend JavaScript array using concat() method</h4>
<div id="result"></div>
<script>
const number1 = [3, 6, 9];
const number2 = [12, 15, 18];
const combined = number1.concat(number2);
console.log("Original array1:", number1);
console.log("Combined array:", combined);
document.getElementById("result").innerHTML = "New Array: " + combined;
</script>
</body>
</html>
Original array1: 3,6,9 Combined array: 3,6,9,12,15,18 New Array: 3,6,9,12,15,18
Using Spread Operator (Recommended)
The spread operator provides the cleanest and most modern way to extend arrays. It creates a new array without modifying the originals.
Syntax
const newArray = [...array1, ...array2]
Example
<html>
<body>
<h4>Extend JavaScript array using Spread Operator</h4>
<div id="result1"></div>
<div id="result2"></div>
<script>
const number1 = [4, 5, 6];
const number2 = [1, 2, 3];
const combined1 = [...number1, ...number2];
const combined2 = [...number2, ...number1];
document.getElementById("result1").innerHTML = "Array1 + Array2: " + combined1;
document.getElementById("result2").innerHTML = "Array2 + Array1: " + combined2;
</script>
</body>
</html>
Array1 + Array2: 4,5,6,1,2,3 Array2 + Array1: 1,2,3,4,5,6
Comparison of Methods
| Method | Modifies Original? | Returns New Array? | Readability |
|---|---|---|---|
push(...array) |
Yes | No | Good |
push.apply() |
Yes | No | Poor |
concat() |
No | Yes | Good |
[...arr1, ...arr2] |
No | Yes | Excellent |
Conclusion
The spread operator [...array1, ...array2] is the most modern and readable approach for extending arrays. Use push(...array) when you need to modify the original array in place.
3K+ Views
