In JavaScript, arrays are used to store multiple values in a single variable. There are times when you need to extend an existing array with another array. It is essential to understand that extending an array directly affects the original array, and it is different from concatenating which results in a new array. Below, we discuss several methods to extend an array without creating a new one, along with technical details and examples.

Using the push() Method

One of the most straightforward methods to extend an existing array with another array is by using the push() method combined with the spread operator (...). The spread operator allows an iterable such as an array to be expanded in places where zero or more arguments are expected.

Example:

1let originalArray = [1, 2, 3];
2let newArray = [4, 5, 6];
3
4originalArray.push(...newArray);
5console.log(originalArray); // Output: [1, 2, 3, 4, 5, 6]

Here, originalArray is extended by newArray and there is no new array created; originalArray itself is mutated.

Using the splice() Method

The splice() method can also be used to insert elements of the second array into the first array at any position. It provides more control over where you want to add new elements.

Example:

1let originalArray = [1, 2, 3];
2let newArray = [4, 5, 6];
3
4// Arguments are: start index, number of elements to remove, elements to add
5originalArray.splice(originalArray.length, 0, ...newArray);
6console.log(originalArray); // Output: [1, 2, 3, 4, 5, 6]

Here, splice() is used to add elements starting from the end of originalArray. The second argument, 0, means that no elements are being removed.

Using the Array.prototype.concat() Method in a Mutable Way

Although concat() itself returns a new array, you can use it to extend an existing array in a mutable way by reassigning it back to the original variable.

Example:

1let originalArray = [1, 2, 3];
2let newArray = [4, 5, 6];
3
4originalArray = originalArray.concat(newArray);
5console.log(originalArray); // Output: [1, 2, 3, 4, 5, 6]

This method does not fulfill our requirement perfectly as it technically creates a new array, but the original reference is updated to point to this new array, which can be useful in some scenarios.

Summary Table

Additional Information

Performance Implications

Using push() with the spread operator is generally the quickest and most efficient way to extend an array if all new elements are to be added at the end. It does not create a new array and directly modifies the in-memory array.

Browser Compatibility

All methods described are widely supported in modern browsers and JavaScript environments. However, the spread operator (...) is part of ES6 and might require polyfills or Babel transpilation for deployment in older environments.

Extending an existing array in JavaScript can be done effectively with native methods like push() or splice(), depending on where and how you want to insert new elements. These approaches are both useful and vital for managing data structures efficiently in JavaScript.