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

Script Preparation code:

var params = [
    [1, 2],
    ["hello", true, 7],
    Array(10000).fill(4),
];

Tests:

reduce + Array.prototype.concat
const x = params.reduce((acc, val) => acc.concat(val), []);
Array.prototype.flat
const x = params.flat(1);
concat(...)
const x = [].concat(...params)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce + Array.prototype.concat
Array.prototype.flat
concat(...)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 27 days ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 148 on Android

View result in a separate tab

Test name	Executions per second
reduce + Array.prototype.concat	295115.1 Ops/sec
Array.prototype.flat	34005.2 Ops/sec
concat(...)	281317.0 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The test compares three approaches to concatenate arrays:

1. `reduce.concat()`
2. `Array.prototype.flat` (with a depth of 1, i.e., `flat(1)`)
3. `concat(...)` (spread operator)

These methods are alternatives to the traditional `concat()` method.

**Options Compared**

The three options are compared in terms of their performance, which is measured by the number of executions per second.

**Pros and Cons of Each Approach**

1. **`reduce.concat()`**: This approach uses the `reduce()` method to concatenate arrays. It's a more functional programming style way of doing things. However, it might have some overhead due to the use of the `reduce()` method.
	* Pros: Can be more concise and expressive.
	* Cons: Might have higher overhead due to the use of `reduce()`.
2. **`Array.prototype.flat(1)`**: This approach uses the `flat()` method with a depth of 1 to flatten arrays. It's a built-in method in modern JavaScript, but it can be slower than traditional concatenation methods.
	* Pros: Fast and efficient way to flatten arrays.
	* Cons: Only flattens arrays, not concatenates them directly.
3. **`concat(...)`**: This approach uses the spread operator (`...`) to concatenate arrays. It's a concise and readable way to do things.
	* Pros: Fast and efficient, easy to read.
	* Cons: Might have some overhead due to the use of the spread operator.

**Library Used**

None explicitly mentioned, but the `Array.prototype.flat()` method is a built-in part of modern JavaScript (introduced in ECMAScript 2019).

**Special JS Features or Syntax**

The test uses the spread operator (`...`) for the third approach. This is a relatively new feature introduced in ECMAScript 2015.

**Other Alternatives**

There are other ways to concatenate arrays, such as using `Array.prototype.push()` and `Array.prototype.splice()`, but these approaches might not be as efficient or readable as the ones being compared.

In summary, the benchmark compares three alternative methods for concatenating arrays: `reduce.concat()`, `Array.prototype.flat(1)`, and `concat(...)` (spread operator). Each method has its pros and cons in terms of performance, readability, and conciseness.

Related benchmarks:

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

Compare the new ES6 spread operator with the traditional concat() method

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

Created: 4 years ago by: Guest

Jump to the latest result

reduce + Array.prototype.concat

Array.prototype.flat

concat(...)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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