How to extend an existing JavaScript array with another array, without creating a new array

In JavaScript, there are times when you want to extend an existing array with the contents of another array—without creating a brand-new array. This is useful when you need to preserve references to the original array, especially if other parts of your code are still using it.

Here are a few reliable ways to do it:

Using push.apply()

 let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
Array.prototype.push.apply(arr1, arr2);
console.log(arr1); // [1, 2, 3, 4, 5, 6]

• This method pushes all elements from arr2 into arr1.
  
• It’s one of the oldest and most widely compatible approaches.
  

Using the spread operator (...) with push() (ES6+)

 let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
arr1.push(...arr2);
console.log(arr1); // [1, 2, 3, 4, 5, 6]

• Cleaner and more modern than apply().
  
• Achieves the same result in fewer lines of code.
  

Using a loop (less common)

 for (let item of arr2) {
  arr1.push(item);
}

Works but not as efficient or elegant as the above methods.

 Key takeaways:

• Use push.apply() for older browser compatibility.
  
• Prefer the spread operator (arr1.push(...arr2)) for modern code—it’s simpler and more readable.
  
• Avoid concatenation (concat()), since that creates a new array instead of modifying the original.
  

This way, you extend the original array directly, keeping references intact and avoiding unnecessary copies.