Benchmark: (reduce + concat) vs (reduce + destructure) vs (reduce + push) vs Array.flat

Tests:

reduce + concat
const params = [[1, 2], ["hello", true, 7], [null, undefined, {}], [1, 2, 3, 4, 5], [false, true, {}, {}, {}]]; params.reduce((acc, val) => acc.concat(val), []);
Array.flat
const params = [[1, 2], ["hello", true, 7], [null, undefined, {}], [1, 2, 3, 4, 5], [false, true, {}, {}, {}]]; params.flat();
reduce + destructure
const params = [[1, 2], ["hello", true, 7], [null, undefined, {}], [1, 2, 3, 4, 5], [false, true, {}, {}, {}]]; params.reduce((acc, curr) => [...acc, ...curr], []);
reduce + push
const params = [[1, 2], ["hello", true, 7], [null, undefined, {}], [1, 2, 3, 4, 5], [false, true, {}, {}, {}]]; params.reduce((acc, curr) => (acc.push(...curr), acc), []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce + concat
Array.flat
reduce + destructure
reduce + push

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Measuring the performance of different JavaScript array methods can be fascinating.

**Benchmark Overview**

The benchmark compares four ways to flatten an array:

1. `reduce + concat`
2. `reduce + destructure` (introduced in ECMAScript 2018)
3. `reduce + push`
4. `Array.flat`

We'll dive into each approach, their pros and cons, and discuss the libraries and special features used.

**1. reduce + concat**

The first method uses `reduce()` to accumulate an array of values from each element in the input array. The `concat()` method is then called on the accumulator to combine all values into a single array.

Pros:

* Simple implementation
* Works with older browsers

Cons:

* Inefficient, as it creates intermediate arrays
* Requires two separate calls (reduce and concat)

```javascript
const params = [[1, 2], [\"hello\", true, 7], [null, undefined, {}], [1, 2, 3, 4, 5], [false, true, {}, {}, {}]];
params.reduce((acc, val) => acc.concat(val), []);
```

**2. reduce + destructure**

The second method uses `reduce()` with an updated implementation that uses the spread operator (`...`) to concatenate values instead of `concat()`. This is a more efficient approach.

Pros:

* More concise and expressive
* Efficient, as it avoids creating intermediate arrays

Cons:

* Requires ECMAScript 2018 or later support

```javascript
const params = [[1, 2], [\"hello\", true, 7], [null, undefined, {}], [1, 2, 3, 4, 5], [false, true, {}, {}, {}]];
params.reduce((acc, curr) => [...acc, ...curr], []);
```

**3. reduce + push**

The third method uses `reduce()` and modifies the accumulator by pushing values onto it using `push()`. This approach is similar to `concat()` but avoids creating intermediate arrays.

Pros:

* Efficient, as it avoids creating intermediate arrays
* Works with older browsers

Cons:

* Less concise than other methods
* Requires two separate calls (reduce and push)

```javascript
const params = [[1, 2], [\"hello\", true, 7], [null, undefined, {}], [1, 2, 3, 4, 5], [false, true, {}, {}, {}]];
params.reduce((acc, curr) => (acc.push(...curr), acc), []);
```

**4. Array.flat**

The fourth method uses the `Array.flat()` method, which is a built-in method introduced in ECMAScript 2019.

Pros:

* Simple and concise implementation
* Efficient, as it avoids creating intermediate arrays

Cons:

* Requires ECMAScript 2019 or later support

```javascript
const params = [[1, 2], [\"hello\", true, 7], [null, undefined, {}], [1, 2, 3, 4, 5], [false, true, {}, {}, {}]];
params.flat();
```

**Libraries and Special Features**

* The `Array.flat()` method is a built-in method introduced in ECMAScript 2019.
* The spread operator (`...`) is a feature introduced in ECMAScript 2018.

**Other Alternatives**

If you need to support older browsers, you can use the first two methods or consider using a library like Lodash, which provides an `flatten()` function that works with various array methods.

Keep in mind that while `Array.flat()` and the spread operator are more efficient and concise, they may not be suitable for all use cases. It's essential to consider your target browser support and performance requirements when choosing an approach.

Related benchmarks:

(reduce + concat) vs (reduce + destructure) vs (reduce + push) vs Array.flat (version: 0)

Comparing performance of: reduce + concat vs Array.flat vs reduce + destructure vs reduce + push

Created: 4 years ago by: Guest

Jump to the latest result

reduce + concat

Array.flat

reduce + destructure

reduce + push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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