Benchmark: Concat vs push.apply vs flat for larger arrays of arrays

Script Preparation code:

window.top.tests = {control:[], concat:[], concat2:[], spread:[], flat: []};
window.test = (new Array(10000)).fill(null);
window.arrays = (new Array(100)).fill(window.test);
window.cutoff = 5000;

Tests:

Control (for push)
window.top.tests.control = window.arrays.reduce((acc, arr) => { acc.push.apply(acc, arr); return acc; }, []); if (window.top.tests.control.length > window.cutoff) { window.top.tests.control = []; console.log('reset control'); }
Reduce Concat
window.top.tests.concat = window.arrays.reduce((acc, arr) => acc.concat(arr), []); if (window.top.tests.concat.length > window.cutoff) { window.top.tests.concat = []; console.log('reset concat'); }
Spread
window.top.tests.spread = window.arrays.reduce((acc, arr) => [...acc, ...arr], []); if (window.top.tests.spread.length > window.cutoff) { window.top.tests.spread = []; console.log('reset spread'); }
Flat
window.top.tests.flat = window.arrays.flat(); if (window.top.tests.flat.length > window.cutoff) { window.top.tests.flat = []; console.log('reset flat'); }
Array Concat
window.top.tests.concat2 = [].concat(...window.arrays); if (window.top.tests.concat2.length > window.cutoff) { window.top.tests.concat2 = []; console.log('reset concat2'); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Control (for push)
Reduce Concat
Spread
Flat
Array Concat

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
Control (for push)	34.0 Ops/sec
Reduce Concat	2.7 Ops/sec
Spread	1.0 Ops/sec
Flat	21.1 Ops/sec
Array Concat	154.8 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

### Benchmark Overview

The benchmark titled "Concat vs push.apply vs flat for larger arrays of arrays" tests different methods for appending (or concatenating) JavaScript arrays, particularly in the context of larger arrays of arrays. The goal is to understand how each method performs in terms of speed and efficiency while appending elements to an accumulator array.

### Comparison of Approaches

1. **Control (for push)**:
   - **Method**: Uses `Array.prototype.push.apply()` to append elements. This combines the `push` method with `apply`, which allows for pushing multiple elements at once from an existing array to another.
   - **Pros**: 
     - Efficient for large numbers of elements.
     - Works well without creating additional intermediate arrays.
   - **Cons**: 
     - Limited by the maximum call stack size; it may throw an overflow error for very large concatenations.
     - Less readable compared to other methods.
  
2. **Reduce Concat**:
   - **Method**: Uses `Array.prototype.reduce()` to iterate through each array and `Array.prototype.concat()` to combine them.
   - **Pros**: 
     - Functional approach, which is clear and easy to understand.
     - Does not modify the original arrays, preserving immutability.
   - **Cons**: 
     - Can be significantly slower, especially with many large arrays, as it creates many intermediate arrays.

3. **Spread**:
   - **Method**: Utilizes the spread operator (`...`) within `Array.prototype.reduce()` to concatenate arrays.
   - **Pros**: 
     - Very readable syntax and functional style.
     - Simplifies the syntax for array concatenation compared to traditional methods.
   - **Cons**: 
     - Lower performance for large arrays due to repeated array creation.
     - Similar limitations as reduce in terms of performance overhead.

4. **Flat**:
   - **Method**: This makes use of the `Array.prototype.flat()` method, which flattens a nested array structure.
   - **Pros**: 
     - Directly achieves the goal of flattening arrays and appending in a single method.
     - Optimized and often performs better due to internal optimizations of JavaScript engines.
   - **Cons**: 
     - Limited to cases where you want a flat structure; not suitable if deeper nested levels need flattening.

5. **Array Concat**:
   - **Method**: Uses `[].concat.apply()` or the spread syntax `[].concat(...arrays)` to concatenate multiple arrays.
   - **Pros**: 
     - Clear and effective method for combining arrays.
     - Maintains readability while leveraging JavaScript's built-in array method.
   - **Cons**: 
     - Similar to the control method, performance may decrease significantly with very large input due to stack size limits.
     - Memory allocation for intermediate arrays can be a concern with large datasets.

### Results Summary

The benchmark results show varying performance levels for each method:

1. **Array Concat**: Highest performance at approximately 154.83 executions per second.
2. **Control (push)**: Second best at around 33.99 executions per second.
3. **Flat**: Moderate performance at about 21.13 executions per second.
4. **Reduce Concat**: Lower performance at around 2.73 executions per second.
5. **Spread**: Lowest performance at approximately 1.03 executions per second.

### Other Considerations

- **Memory Usage**: Consideration should be given to how each method handles memory, particularly for very large data sets. Methods that create numerous intermediate arrays (like `reduce` with `concat` or `spread`) can quickly exhaust available memory.
- **Readability vs. Performance**: A balance between performance and code readability is often struck based on project requirements. While some developers prefer functional approaches for their clarity, performance-critical applications may choose to leverage more verbose methods.
  
### Alternatives

- **Typed Arrays**: For numeric data, consider using Typed Arrays for better performance due to lower overhead.
- **Web Workers**: When dealing with large computations, moving heavy lifting to a Web Worker can prevent main thread blockage.
- **Immutable.js or similar libraries**: For managing complex data mutations efficiently, using immutable data structures might provide optimized methods for deep concatenation or merging.

In conclusion, each method has its trade-offs between readability and execution speed. Choosing the right one depends on the size of the data involved, the importance of performance versus clarity, and the specific application context.

Related benchmarks:

Concat vs push.apply vs flat for larger arrays of arrays (version: 1)

Comparing the various ways to append to a large array again

Comparing performance of: Control (for push) vs Reduce Concat vs Spread vs Flat vs Array Concat

Created: one month ago by: Guest

Jump to the latest result

Control (for push)

Reduce Concat

Spread

Flat

Array Concat

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):