Benchmark: reduce.concat() vs flat() vs spread ops

Script Preparation code:

var params = [[ 1, 2 ], [ "hello", true, 7 ]];
var res_concat = params.reduce((acc, val) => acc.concat(val), []);
var res_flat = params.flat();
var res_spread = params.reduce((acc, val) => [...acc, ...val], []);

console.log("Concat Result");
console.log(JSON.stringify(res_concat));
console.log();

console.log("Flat Result");
console.log(JSON.stringify(res_flat));
console.log();

console.log("Spread Result");
console.log(JSON.stringify(res_spread));

Tests:

reduce + Array.prototype.concat
var params = [[ 1, 2 ], [ "hello", true, 7 ]]; var other = params.reduce((acc, val) => acc.concat(val), []);
Array.prototype.flat
var params = [[1, 2, params], [ "hello", true, 7 ]]; var other = params.flat();
... spread
var params = [[ 1, 2 ], [ "hello", true, 7 ]]; var other = params.reduce((acc, val) => [...acc, ...val], []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce + Array.prototype.concat
Array.prototype.flat
... spread

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:92.0) Gecko/20100101 Firefox/92.0

Browser/OS: Firefox 92 on Windows

View result in a separate tab

Test name	Executions per second
reduce + Array.prototype.concat	5627234.0 Ops/sec
Array.prototype.flat	7907171.5 Ops/sec
... spread	5832759.5 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided benchmark, `MeasureThat.net`, compares the performance of three different array operations: concatenation using `Array.prototype.concat()`, reduction using `Array.prototype.reduce()`, and spreading using the spread operator (`...`).

**Benchmark Definition**

The benchmark definition JSON contains information about the test:

* The `Name` field specifies that this is a comparison between concatenate, reduce, and spread operations.
* The `Description` field provides a brief explanation of what the test measures.
* The `Script Preparation Code` section defines an array `params` with two inner arrays containing different types of values (numbers, strings, booleans, and numbers). This code will be executed multiple times to measure the performance of each operation.
* The `Html Preparation Code` field is empty, indicating that no HTML preparation is needed.

**Test Cases**

The benchmark consists of three individual test cases:

1. **"reduce + Array.prototype.concat"`**: Measures the performance of concatenating two arrays using `Array.prototype.reduce()` and `Array.prototype.concat()`.
2. **"Array.prototype.flat"`**: Measures the performance of flattening an array with nested arrays using `Array.prototype.flat()`.
3. **"... spread"`**: Measures the performance of spreading the values from a nested array into a new array using the spread operator (`...`).

**Options Compared**

The benchmark compares the following options:

* Concatenation using `Array.prototype.concat()`
* Reduction using `Array.prototype.reduce()`
* Spreading using the spread operator (`...`)

**Pros and Cons of Each Approach**

Here's a brief overview of each approach:

1. **Concatenation using `Array.prototype.concat()`**
	* Pros: Simple, easy to understand.
	* Cons: Can be slow for large arrays due to the overhead of creating new arrays.
2. **Reduction using `Array.prototype.reduce()`**
	* Pros: Efficient and flexible way to process arrays, as it can also be used for other operations like mapping and filtering.
	* Cons: May require additional setup (e.g., defining an initial value) and can be slower than direct concatenation or spreading.
3. **Spreading using the spread operator (`...`)**
	* Pros: Fast and efficient way to create a new array from nested arrays, with minimal overhead.
	* Cons: Requires modern JavaScript support (ECMAScript 2015+).

**Library Used**

The benchmark does not explicitly mention any libraries, but it uses standard JavaScript APIs such as `Array.prototype.concat()` and `Array.prototype.reduce()`. The spread operator (`...`) is also a built-in feature in modern JavaScript.

**Special JS Features or Syntax**

There are no special JavaScript features or syntax mentioned in the benchmark definition or test cases. However, note that some older browsers might not support the spread operator (`...`).

**Other Alternatives**

If you need to compare other array operations or want alternative approaches to concatenation and reduction, consider:

* Using `Array.prototype.push()` instead of `concat()`.
* Implementing your own custom concatenation or reduction functions.
* Exploring other methods for flattening arrays, such as using a library like `lodash.flat()`.

Keep in mind that the specific alternatives will depend on your use case and requirements.

Related benchmarks:

reduce.concat() vs flat() vs spread ops (version: 0)

Compare array concatination reduce, spread, flat operations

Comparing performance of: reduce + Array.prototype.concat vs Array.prototype.flat vs ... spread

Created: 3 years ago by: Registered User

Jump to the latest result

reduce + Array.prototype.concat

Array.prototype.flat

... spread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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