JavaScript: Most Efficient Way to Concatenate N Arrays of Objects (Mutable) – Performance Guide

Table of Contents#

1. Understanding the Problem: Mutable Concatenation of N Arrays
2. Key Considerations: Objects, Mutability, and Performance
3. Common Mutable Concatenation Methods
4. Performance Metrics to Prioritize
5. Most Efficient Methods for N Arrays
6. Benchmarking: Which Method Wins?
7. Edge Cases & Limitations
8. Best Practices for Production Code
9. Conclusion
10. References

1. Understanding the Problem: Mutable Concatenation of N Arrays#

What is Array Concatenation?#

Array concatenation is the process of combining two or more arrays into a single array. For example, given arr1 = [obj1, obj2] and arr2 = [obj3, obj4], concatenation results in [obj1, obj2, obj3, obj4].

Why "Mutable"?#

Mutable concatenation modifies an existing array (the "target array") by adding elements from other arrays, rather than creating a new array. This avoids the memory cost of allocating a new array and copying elements, which is critical for large datasets.

Why "N Arrays"?#

We focus on "N arrays" (an arbitrary number of arrays, not just 2 or 3) to cover scalable scenarios, such as dynamic lists of arrays generated at runtime (e.g., merging 50 API response chunks).

Why "Arrays of Objects"?#

Objects in JavaScript are reference types. When concatenating arrays of objects, we copy references to the objects, not the objects themselves. This means mutable concatenation does not clone objects—only the array structure is modified, which simplifies performance analysis (no deep cloning overhead).

2. Key Considerations: Objects, Mutability, and Performance#

Objects as Reference Types#

Since arrays of objects store references, concatenation only copies these references. This is efficient, but it means changes to an object in the concatenated array will affect the original object (and vice versa). For example:

const obj = { id: 1 };
const arr1 = [obj];
const arr2 = [];
arr2.push(...arr1); // arr2 now contains a reference to `obj`
obj.id = 2; // Both arr1[0].id and arr2[0].id are now 2

This behavior is consistent across all concatenation methods and is not unique to mutable approaches.

Mutability vs. Immutability#

Performance Drivers#

For N arrays of objects, performance depends on:

• Execution Time: How quickly elements are added to the target array.
• Memory Usage: How much additional memory is allocated (mutable methods minimize this).
• Scalability: Handling large N (e.g., 100+ arrays) and large array sizes (e.g., 10,000+ elements per array).

3. Common Mutable Concatenation Methods#

We focus on methods that mutate a target array to concatenate N input arrays. Below are the most popular approaches:

Method 1: Array.prototype.push() with Spread Operator#

The push() method adds elements to the end of an array and returns the new length. Combined with the spread operator (...), it can concatenate multiple arrays:

const target = [];
const arraysToConcat = [arr1, arr2, arr3, /* ..., arrN */];
 
arraysToConcat.forEach(arr => target.push(...arr));

How it works: The spread operator unpacks each input array into individual arguments for push(), which adds them to target.

Method 2: Array.prototype.push.apply()#

Older browsers (pre-ES6) used apply() to pass arrays as arguments to push(). While less common today, it’s still relevant for legacy code:

const target = [];
const arraysToConcat = [arr1, arr2, arr3, /* ..., arrN */];
 
arraysToConcat.forEach(arr => Array.prototype.push.apply(target, arr));

How it works: apply() calls push() with target as this and arr as the list of arguments.

Method 3: Nested for Loops#

A low-level approach: iterate over each input array, then iterate over its elements, and push them into the target array:

const target = [];
const arraysToConcat = [arr1, arr2, arr3, /* ..., arrN */];
 
for (const arr of arraysToConcat) {
  for (const element of arr) {
    target.push(element);
  }
}

Method 4: reduce() with push()#

Using reduce() to iterate over N arrays and push elements into the target:

const target = [];
const arraysToConcat = [arr1, arr2, arr3, /* ..., arrN */];
 
arraysToConcat.reduce((acc, curr) => {
  acc.push(...curr);
  return acc;
}, target);

4. Performance Metrics to Prioritize#

To determine the "most efficient" method, we measure:

1. Execution Time#

The time taken to concatenate all elements. Critical for large N or large arrays.

2. Memory Usage#

Mutable methods reuse the target array, so memory usage is dominated by the target array’s final size. However, some methods (e.g., spread) may temporarily allocate memory for unpacking arrays, which can affect performance for very large arrays.

3. Scalability#

Handling:

• Large N (e.g., 1,000 input arrays).
• Large array sizes (e.g., 100,000 elements per input array).

4. Engine Compatibility#

JavaScript engines (V8, SpiderMonkey) optimize operations differently. For example, V8 (Chrome/Node.js) heavily optimizes for loops and push(), while spread operators may have higher overhead.

5. Most Efficient Methods for N Arrays#

After analyzing performance metrics, two methods stand out for concatenating N arrays of objects:

Winner 1: Nested for Loops#

Why? Low-level iteration minimizes overhead. No need to unpack arrays (unlike spread) or use function calls (unlike reduce).

Implementation:

function concatMutableForLoops(target, arraysToConcat) {
  for (let i = 0; i < arraysToConcat.length; i++) { // Loop over N arrays
    const arr = arraysToConcat[i];
    for (let j = 0; j < arr.length; j++) { // Loop over elements in array i
      target.push(arr[j]);
    }
  }
  return target;
}
 
// Usage:
const target = [];
const arraysToConcat = [arr1, arr2, arr3, ...arrN];
concatMutableForLoops(target, arraysToConcat);

Advantages:

• Fastest execution time for large N and large arrays.
• No hidden overhead (e.g., spread unpacking, reduce callback functions).
• Works reliably with very large arrays (avoids stack overflow risks).

Winner 2: push() with Spread Operator#

Why? Concise syntax and good performance for small-to-medium N/array sizes.

Implementation:

function concatMutableSpread(target, arraysToConcat) {
  for (const arr of arraysToConcat) {
    target.push(...arr); // Spread array elements as arguments to push()
  }
  return target;
}
 
// Usage:
const target = [];
const arraysToConcat = [arr1, arr2, arr3, ...arrN];
concatMutableSpread(target, arraysToConcat);

Advantages:

• Readable and concise (modern JS syntax).
• Fast for small-to-medium arrays (spread is optimized in modern engines).

Why Not apply()?#

Array.prototype.push.apply(target, arr) has a critical limitation: it passes the entire array as arguments to push(), which can exceed the engine’s argument length limit (e.g., ~1e5 elements in V8). This throws a RangeError: Maximum call stack size exceeded. For example:

const largeArr = new Array(1e6).fill({}); // 1 million elements
const target = [];
target.push.apply(target, largeArr); // Throws RangeError!

The spread operator (target.push(...largeArr)) has the same limitation, but modern engines (V8 6.0+) handle larger arrays better than apply(). Still, for arrays with >1e5 elements, for loops are safer.

Why Not reduce()?#

reduce() adds function call overhead for each array in arraysToConcat. For N=1,000 arrays, this results in 1,000 extra function calls compared to a for loop, which slows execution.

6. Benchmarking: Which Method Wins?#

To validate, we benchmarked the top methods using Node.js (V8 engine) with the following test cases:

Results (Average Execution Time, Lower = Better)#

Key Takeaways:

• Nested for loops are fastest across all cases, especially for large N or large arrays.
• push() with spread is competitive for small-to-medium data but risky for very large arrays (due to stack limits).
• reduce() is slower due to function call overhead.

7. Edge Cases & Limitations#

Empty Arrays#

All methods handle empty arrays gracefully. For example, concatMutableForLoops(target, [ [], [obj] ]) correctly adds obj to target.

Sparse Arrays#

Sparse arrays (e.g., [1, , 3]) are treated as having undefined in empty slots. Mutable methods will push undefined for these slots, which may be unintended. To avoid this, filter sparse arrays first:

const sparseArr = [1, , 3];
const denseArr = sparseArr.filter(() => true); // [1, undefined, 3] (explicit undefined)

Non-Array Inputs#

If arraysToConcat contains non-array values (e.g., null, undefined), methods like for loops will throw errors when accessing arr.length. Validate inputs first:

function concatMutableSafe(target, arraysToConcat) {
  for (const arr of arraysToConcat) {
    if (!Array.isArray(arr)) continue; // Skip non-arrays
    for (let j = 0; j < arr.length; j++) {
      target.push(arr[j]);
    }
  }
  return target;
}

8. Best Practices for Production Code#

1. Use for Loops for Large Data#

For arrays with >10,000 elements or N > 100 arrays, nested for loops are the safest and fastest choice.

2. Use Spread for Readability (Small Data)#

For small N and small arrays, push() with spread (target.push(...arr)) is clean and performant.

3. Avoid apply() Entirely#

apply() is outdated and error-prone for large arrays. Use spread or for loops instead.

4. Validate Inputs#

Ensure arraysToConcat contains only arrays to avoid runtime errors.

5. Document Mutability#

Explicitly note that the target array is mutated (e.g., in function comments) to prevent bugs:

/**
 * Mutably concatenates N arrays of objects into the target array.
 * @param {Array} target - The array to modify (will be mutated).
 * @param {Array<Array>} arraysToConcat - N arrays to concatenate.
 * @returns {Array} The mutated target array.
 */
function concatMutable(target, arraysToConcat) { /* ... */ }

9. Conclusion#

When concatenating N arrays of objects in JavaScript, mutable methods are optimal for performance and memory efficiency. Among these:

• Nested for loops are the fastest and most scalable, ideal for large N or large arrays (avoids stack overflow risks).
• push() with the spread operator is best for small-to-medium data, offering readability and good performance.

Avoid apply() and reduce() for large datasets due to scalability and overhead issues. Always validate inputs and document mutability to prevent unintended side effects.

10. References#

• MDN Web Docs: Array.prototype.push()
• V8 Engine: Optimization Guide
• Node.js Performance Benchmarks
• JavaScript Array Concatenation: Mutable vs. Immutable
• Spread Operator Limitations in V8