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

Script Preparation code:

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

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'); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 14_8_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.2 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 14 on iOS 14.8.1

View result in a separate tab

Test name	Executions per second
Control (for push)	478382.7 Ops/sec
Concat	576089.7 Ops/sec
Spread	370293.8 Ops/sec
Flat	1000634.4 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is a platform for comparing the performance of different JavaScript approaches to manipulate arrays. The provided benchmark defines four test cases: `Control (for push)`, `Concat`, `Spread`, and `Flat`. These tests measure how fast each approach can append elements to an array.

**Test Cases and Approaches**

1. **Control (for push)**:
	* Approach: Using the `push()` method, which appends one or more elements to the end of an array.
	* Example Benchmark Definition: `window.top.tests.control = window.arrays.reduce((acc, arr) => {\r\n  acc.push(...arr);\r\n  return acc;\r\n}, []);`
2. **Concat**:
	* Approach: Using the `concat()` method, which returns a new array that is the result of concatenating an array with another array or value.
	* Example Benchmark Definition: `window.top.tests.concat = window.arrays.reduce((acc, arr) => acc.concat(arr), []);`
3. **Spread**:
	* Approach: Using the spread operator (`...`) to expand an array into its individual elements and then reassigning them to a new array.
	* Example Benchmark Definition: `window.top.tests.spread = window.arrays.reduce((acc, arr) => [...acc, ...arr], []);`
4. **Flat**:
	* Approach: Using the `flat()` method, which returns an array with all sub-array elements concatenated into it recursively up to a specified depth.
	* Example Benchmark Definition: `window.top.tests.flat = window.arrays.flat();`

**Pros and Cons**

Each approach has its strengths and weaknesses:

* **Control (for push)**:
	+ Pros: Simple and efficient, as it only requires pushing elements onto the array.
	+ Cons: Can be slower for large arrays due to the overhead of repeatedly calling `push()`.
* **Concat**:
	+ Pros: Creates a new array, which can avoid modifying the original array.
	+ Cons: Requires creating an intermediate array and copying its contents, which can be slow for large arrays.
* **Spread**:
	+ Pros: Avoids modifying the original array and uses the spread operator, which is efficient.
	+ Cons: Can be slower than `push()` due to the overhead of expanding the array using the spread operator.
* **Flat**:
	+ Pros: Recursively flattens the array, avoiding the need for explicit looping or concatenation.
	+ Cons: Can be slower due to the recursive nature of `flat()`.

**Library and Special JS Features**

The benchmark uses the following libraries:

* No external libraries are used in this benchmark.
* The `reduce()` method is used, which is a built-in JavaScript array method that applies a function to each element in an array.

No special JS features are mentioned in the benchmark definition.

Related benchmarks:

Concat vs push(...) vs flat 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

Created: 5 years ago by: Guest

Jump to the latest result

Control (for push)

Concat

Spread

Flat

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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