Benchmark: reduce spread vs reduce

Script Preparation code:

var array = [{items: ['banana', 'jesus', 1212312, 2, 4, 'б', '112312312', 'dsdsdsds', 'sdsdsdsd', 'ergergergerg', '112312312', 'dsdsdsds', 'sdsdsdsd', 'ergergergerg', '112312312', 'dsdsdsds', 'sdsdsdsd', 'ergergergerg', '112312312', 'dsdsdsds', 'sdsdsdsd', 'ergergergerg', '112312312', 'dsdsdsds', 'sdsdsdsd', 'ergergergerg', '112312312', 'dsdsdsds', 'sdsdsdsd', 'ergergergerg', '112312312', 'sausage', 'dsdsdsds', 'sdsdsdsd', 'ergergergerg', '112312312', 'dsdsdsds', 'sdsdsdsd', 'ergergergerg', '112312312', 'dsdsdsds', 'sdsdsdsd', 'ergergergerg']},
             {items: ['banana', 'jesus', 1212312, 2, 4, 'б', '112312312', 'dsdsdsds', 'sdsdsdsd', 'ergergergerg', '112312312', 'dsdsdsds', 'sdsdsdsd', 'ergergergerg', '112312312', 'dsdsdsds', 'sdsdsdsd', 'ergergergerg', '112312312', 'dsdsdsds', 'sdsdsdsd', 'ergergergerg', '112312312', 'dsdsdsds', 'sdsdsdsd', 'ergergergerg', '112312312', 'dsdsdsds', 'sdsdsdsd', 'ergergergerg', '112312312', 'sausage', 'dsdsdsds', 'sdsdsdsd', 'ergergergerg', '112312312', 'dsdsdsds', 'sdsdsdsd', 'ergergergerg', '112312312', 'dsdsdsds', 'sdsdsdsd', 'ergergergerg']},
             {items: ['banana', 'jesus', 1212312, 2, 4, 'б', '112312312', 'dsdsdsds', 'sdsdsdsd', 'ergergergerg', '112312312', 'dsdsdsds', 'sdsdsdsd', 'ergergergerg', '112312312', 'dsdsdsds', 'sdsdsdsd', 'ergergergerg', '112312312', 'dsdsdsds', 'sdsdsdsd', 'ergergergerg', '112312312', 'dsdsdsds', 'sdsdsdsd', 'ergergergerg', '112312312', 'dsdsdsds', 'sdsdsdsd', 'ergergergerg', '112312312', 'sausage', 'dsdsdsds', 'sdsdsdsd', 'ergergergerg', '112312312', 'dsdsdsds', 'sdsdsdsd', 'ergergergerg', '112312312', 'dsdsdsds', 'sdsdsdsd', 'ergergergerg']}]

Tests:

reduce spread
array.reduce((acc, {items}) => { return [...acc, ...items.map((item) => item)]; }, []);
reduce 1
array.reduce((acc, {items}) => { const preparedItems = items.map((item) => { return {item}; }) acc.push(...preparedItems); return acc; }, []);
reduce without const
array.reduce((acc, {items}) => { acc.push(...items.map((item) => { return {item}; })); return acc; }, []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce spread
reduce 1
reduce without const

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.

Let's break down the benchmark and its options.

**Benchmark Description:**
The benchmark measures the performance of three different approaches to using the `Array.prototype.reduce()` method in JavaScript. The test case creates an array with 30 objects, each containing multiple items, including numbers, strings, and other numbers. The goal is to flatten this nested structure into a single-level array.

**Options Compared:**

1. **`reduce` with explicit spread operator (`[...acc, ...items.map((item) => item)]`)**:
This approach uses the spread operator to expand the `items` array into individual elements, which are then added to the accumulator array (`acc`). This method explicitly handles each item individually.
2. **`reduce` with a function that returns an object for each item**:
In this approach, a separate object is created for each item using `const preparedItems = items.map((item) => ({item}));`. Then, these objects are added to the accumulator array (`acc.push(...preparedItems)`). This method requires additional memory allocation and function calls.
3. **`reduce` without explicit spread operator**:
This approach simply adds all items from the `items` array to the accumulator array (`acc.push(...items.map((item) => item));`) without creating an intermediate array of objects.

**Pros and Cons:**

1. **`reduce` with explicit spread operator**:
	* Pros: clear, efficient way to handle individual items.
	* Cons: requires explicit spread operator usage, which might be slower due to the additional function call.
2. **`reduce` with a function that returns an object for each item**:
	* Pros: provides extra memory allocation and flexibility if needed.
	* Cons: introduces unnecessary complexity, increased memory allocation, and potential performance impact.
3. **`reduce` without explicit spread operator**:
	* Pros: simple, fast way to add items to the accumulator array.
	* Cons: may lead to inefficient use of memory if not done correctly.

**Library or Special JS Feature:**
None mentioned in this benchmark.

**Other Considerations:**

* The test case uses a large number of iterations (30 objects with multiple items) to highlight performance differences between these approaches.
* The `executionsPerSecond` metric is used to measure the frequency of executions, which can provide insight into optimization strategies.

**Alternatives:**
If you need to flatten nested arrays in JavaScript, consider using `Array.prototype.flat()` or `Array.prototype.flatMap()`, which are more concise and efficient than the manual `reduce()` approach. However, these methods might not provide the same level of control as the benchmark's options.

Related benchmarks:

reduce spread vs reduce (version: 0)

Comparing performance of: reduce spread vs reduce 1 vs reduce without const

Created: 4 years ago by: Guest

Jump to the latest result

reduce spread

reduce 1

reduce without const

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