Extending Arrays In-Place with JavaScript

Arrays are fundamental data structures in JavaScript, and manipulating them efficiently is crucial for many applications. A common task is to extend an existing array by appending the elements of another array. While methods like concat create a new array, sometimes you need to modify the original array directly – "in-place" – to avoid unnecessary memory allocation and copying. This tutorial explores various techniques to achieve this in JavaScript, along with their trade-offs.

The Challenge: Modifying Arrays Directly

The standard concat() method in JavaScript creates a new array containing all the elements of the original array plus the elements of the array you’re concatenating. This is useful, but it’s not always the most efficient approach, especially when dealing with large arrays. The goal is to extend the original array without creating a copy.

Method 1: Using `push()` with the Spread Operator

The most modern and often preferred method leverages the push() method along with the spread operator (...). The spread operator effectively expands an iterable (like an array) into its individual elements. This allows you to pass all the elements of the second array as separate arguments to the push() method.

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

arr1.push(...arr2);

console.log(arr1); // Output: [1, 2, 3, 4, 5, 6]

This approach is concise and readable. It efficiently appends the elements of arr2 to the end of arr1 without creating a new array.

Important Consideration: While elegant, this method has a limitation. If arr2 is extremely large (generally exceeding 100,000 elements, but this can vary depending on the JavaScript engine and environment), it can lead to a stack overflow error. This is because push() needs to be called once for each element, exceeding the maximum call stack size.

Method 2: Using `apply()` (Legacy Approach)

Before the spread operator was introduced in ES6 (ECMAScript 2015), the apply() method was commonly used to achieve a similar result. apply() allows you to call a function with an array of arguments.

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]

Here, push is called on arr1, and arr2 provides the arguments to be pushed.

Caution: Like the spread operator approach, using apply() with a very large arr2 can also cause a stack overflow. Therefore, it’s generally recommended to use the spread operator if your environment supports it.

Method 3: Iterating with `forEach()` (For Robustness)

For situations where you need to guarantee that you can handle very large arrays without risking a stack overflow, a more robust approach is to iterate over the second array and push each element individually using forEach().

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

arr2.forEach(function(value) {
  arr1.push(value);
});

console.log(arr1); // Output: [1, 2, 3, 4, 5, 6]

This method avoids the limitations of apply() and the spread operator by pushing elements one at a time. It’s less concise, but more reliable when dealing with potentially large arrays.

Choosing the Right Approach

For most cases (small to medium-sized arrays): Use the push() method with the spread operator (arr1.push(...arr2)). It’s the most concise and readable option.
For legacy environments without spread operator support: Use Array.prototype.push.apply(arr1, arr2).
For extremely large arrays (where stack overflow is a concern): Use the forEach() loop to iterate and push elements individually. This provides the most robust solution, even though it’s less concise.