Logo
Back

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

In JavaScript, merging arrays while keeping the existing array intact (instead of creating a brand-new array) is often required when you’re dealing with large data sets or performance-sensitive code. Below are some of the most straightforward techniques you can use.

1. Using push(...arr2)

A concise ES6+ solution is to use the spread operator (...):

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// Extend arr1 with arr2
arr1.push(...arr2);
console.log(arr1);
// Output: [1, 2, 3, 4, 5, 6]
  • Why This Works: push() mutates the original array (arr1), appending each element from arr2 in one go.
  • Performance: This approach is typically efficient and very readable for most moderate-sized arrays.

2. Using splice()

If you want more control over the insertion point (not just at the end), splice() also mutates the original array:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// Insert arr2 after the 2nd index (end of arr1):
arr1.splice(arr1.length, 0, ...arr2);
console.log(arr1);
// Output: [1, 2, 3, 4, 5, 6]
  • Why This Works: splice(startIndex, deleteCount, ...itemsToInsert) modifies the array in place.
  • Flexibility: You can insert elements anywhere, not just at the end.

3. Using push.apply()

This is an older but still valid approach:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

Array.prototype.push.apply(arr1, arr2);
console.log(arr1);
// Output: [1, 2, 3, 4, 5, 6]
  • Explanation: This method uses apply() to call push() for each element in arr2.
  • Modern Alternative: The spread operator is more concise and recommended if you’re using ES6 or above.

Performance & Memory Considerations

  1. Mutations: All these methods mutate the first array in place, which is exactly what you want if your goal is to avoid creating a separate array.
  2. Spread Operator vs. apply():
    • The spread operator (...arr2) is generally preferred for readability.
    • apply() has existed in JavaScript for longer, so you’ll find it in older codebases.
  3. Large Arrays: For extremely large arrays, consider measuring performance. Typically, push(...arr2) or apply() is still quite efficient, but watch out for maximum call stack limitations if arr2 is massive.

Master JavaScript with DesignGurus.io

If you’d like a comprehensive course to level up your JavaScript skills—including ES6 features, advanced data manipulation, and best practices—check out:

For further hands-on practice and interview preparation tips, you can explore the DesignGurus YouTube Channel or consider a Coding Mock Interview session for personalized guidance from ex-FAANG engineers.

Key Takeaway
To extend one array with another without creating a new array, simply mutate the first array in place—either via push(...arr2), splice(), or push.apply(). This ensures you preserve references to the original array and avoid unnecessary memory usage.

CONTRIBUTOR
TechGrind