Benchmark: Concat vs push(...) vs flat vs iterator for large arrays of arrays

Script Preparation code:

window.top.tests = {control:[], concat:[], spread:[], flat: [], iterator: []};
window.test = (new Array(10)).fill(null);
window.arrays = (new Array(10)).fill(window.test);
window.cutoff = 5000;

function *flattenIterator(arrays){
  for(let array of arrays)
    for(let item of array)
      yield item;
}

Tests:

Control (for push)
window.top.tests.control = window.arrays.reduce((acc, arr) => { acc.push(...arr); return acc; }, []); if (window.top.tests.control.length > window.cutoff) { window.top.tests.control = []; console.log('reset control'); }
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'); }
Iterator
window.top.tests.iterator = Array.from(flattenIterator(window.arrays)); if (window.top.tests.iterator.length > window.cutoff) { window.top.tests.iterator = []; console.log('reset iterator'); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested.

**Benchmark Overview**

The benchmark compares four different approaches to append to a large array of arrays:

1. `Control (for push)`: Using the `push()` method to add elements to an array.
2. `Concat`: Using the `concat()` method to concatenate two or more arrays.
3. `Spread`: Using the spread operator (`...`) to spread the elements of an array onto another array.
4. `Flat`: Using the `flat()` method to flatten a nested array into a one-dimensional array.
5. `Iterator`: Using an iterator (specifically, `Array.from()`) to create an array from an iterable.

**Options Compared**

Each approach is compared against each other in terms of performance. The test results show the number of executions per second for each approach on a specific browser and device platform.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

* `Control (for push)`: This method is simple and widely supported, but it can be slow due to the overhead of pushing elements onto an array.
* `Concat`: Concatenating arrays using the `concat()` method can lead to performance issues if done excessively, as it creates a new array object. However, it's generally faster than pushing elements onto an array.
* `Spread`: The spread operator is relatively fast and efficient, but its performance can vary depending on the browser and JavaScript version used.
* `Flat`: The `flat()` method is designed for nested arrays and can be slow due to the overhead of traversing the array structure. However, it's generally faster than concatenating individual elements onto an array.
* `Iterator`: Using an iterator to create an array from an iterable can lead to performance issues if not optimized properly.

**Libraries and Features**

None of the test cases rely on specific libraries or features other than the standard JavaScript language.

However, some browsers may have additional features that affect the performance of these approaches. For example:

* Chrome's `flat()` method uses a specialized algorithm that can lead to better performance compared to concatenating individual elements onto an array.
* Safari has a similar optimization for its `flat()` method.

**Other Considerations**

When choosing an approach, consider the following factors:

* Performance: If speed is critical, `Concat`, `Spread`, or `Flat` might be faster. However, these methods can lead to memory issues if done excessively.
* Memory usage: If you need to work with large arrays and want to minimize memory usage, using an iterator or optimizing your array creation process using `flat()` might be a better choice.
* Code simplicity and readability: Using the `push()` method for adding elements to an array can lead to more readable code.

**Alternatives**

If you're looking for alternatives to these approaches, consider:

* Using `Array.prototype.reduce()` instead of concatenating individual elements onto an array.
* Using `Map` or `Set` data structures instead of arrays when working with large amounts of data.
* Optimizing your array creation process using specialized algorithms or libraries (e.g., `flat()`, `Array.from()`).

Keep in mind that the best approach depends on the specific use case and requirements.

Latest run results:

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

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

Browser/OS: Chrome 119 on Windows

View result in a separate tab

Test name	Executions per second
Control (for push)	750176.2 Ops/sec
Concat	483751.1 Ops/sec
Spread	572597.0 Ops/sec
Flat	183369.5 Ops/sec
Iterator	179624.8 Ops/sec

Related benchmarks:

Concat vs push(...) vs flat vs iterator for large arrays of arrays (version: 0)

Comparing the various ways to append to a large array

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

Created: one year ago by: Guest

Jump to the latest result

Control (for push)

Concat

Spread

Flat

Iterator

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):