Benchmark: Reduce + Spread vs Reduce + Concat vs Reduce + Concat (spread)

Tests:

Reduce + Concat
const users = { 'user_1': { list: { ids: [...Array(400)].map(e=>Math.random()*40|0) } }, 'user_2': { list: { ids: [...Array(500)].map(e=>Math.random()*40|0) } }, 'user_3': { list: { ids: [...Array(600)].map(e=>Math.random()*40|0) } }, 'user_4': { list: { ids: [...Array(700)].map(e=>Math.random()*40|0) } }, } const result = Object.values(users).reduce((ids, user) => ids.concat(user.list.ids), []);
Reduce + Spread
const users = { 'user_1': { list: { ids: [...Array(400)].map(e=>Math.random()*40|0) } }, 'user_2': { list: { ids: [...Array(500)].map(e=>Math.random()*40|0) } }, 'user_3': { list: { ids: [...Array(600)].map(e=>Math.random()*40|0) } }, 'user_4': { list: { ids: [...Array(700)].map(e=>Math.random()*40|0) } }, } const result = Object.values(users).reduce((ids, user) => [...ids, ...user.list.ids], []);
Reduce + Concat (spread source)
const users = { 'user_1': { list: { ids: [...Array(400)].map(e=>Math.random()*40|0) } }, 'user_2': { list: { ids: [...Array(500)].map(e=>Math.random()*40|0) } }, 'user_3': { list: { ids: [...Array(600)].map(e=>Math.random()*40|0) } }, 'user_4': { list: { ids: [...Array(700)].map(e=>Math.random()*40|0) } }, } const result = Object.values(users).reduce((ids, user) => ids.concat(...user.list.ids), []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Reduce + Concat
Reduce + Spread
Reduce + Concat (spread source)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 12; SM-G970F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 105 on Android

View result in a separate tab

Test name	Executions per second
Reduce + Concat	1197.7 Ops/sec
Reduce + Spread	1124.0 Ops/sec
Reduce + Concat (spread source)	1126.9 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark named "Reduce + Concat vs Reduce + Concat (spread) vs Reduce + Concat (spread source)". The benchmark compares three different approaches to concatenate arrays using the `reduce()` method in JavaScript.

**Test Cases**

There are three test cases:

1. **"Reduce + Concat"**: This test case uses the traditional `concat()` method to concatenate the `ids` array.
2. **"Reduce + Spread"**: This test case uses the spread operator (`...`) to concatenate the `ids` array.
3. **"Reduce + Concat (spread source)"**: This test case is similar to the previous one, but it uses a spread source in the `reduce()` callback function.

**Options Compared**

The benchmark compares the performance of three different approaches:

1. Traditional `concat()` method
2. Spread operator (`...`)
3. Spread source in the `reduce()` callback function

**Pros and Cons of Each Approach**

Here are some pros and cons of each approach:

* **Traditional `concat()` method**
	+ Pros: Simple to understand, widely supported.
	+ Cons: Can be slow for large arrays due to the overhead of creating intermediate arrays.
* **Spread operator (`...`)**
	+ Pros: More concise, can be faster for large arrays since it avoids the overhead of intermediate arrays.
	+ Cons: May not be as readable or maintainable for some developers.
* **Spread source in `reduce()` callback function**
	+ Pros: Similar to the traditional approach but with better performance due to avoiding intermediate arrays.
	+ Cons: Less readable or maintainable than the traditional approach.

**Library Usage**

There is no external library used in this benchmark. The `reduce()` method is a built-in JavaScript method that operates on arrays.

**Special JS Features/Syntax**

None of the test cases use any special JavaScript features or syntax beyond what's available in modern JavaScript implementations.

**Other Alternatives**

If you're interested in alternative approaches to concatenating arrays, here are some other options:

* Using `Array.prototype.push()` instead of `concat()`
* Using a `for` loop with an index variable
* Using a library like Lodash or Ramda for array operations

Keep in mind that these alternatives may have different performance characteristics and use cases compared to the approaches tested in this benchmark.

Related benchmarks:

Reduce + Spread vs Reduce + Concat vs Reduce + Concat (spread) (version: 0)

Comparing performance of: Reduce + Concat vs Reduce + Spread vs Reduce + Concat (spread source)

Created: 3 years ago by: Guest

Jump to the latest result

Reduce + Concat

Reduce + Spread

Reduce + Concat (spread source)

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):