Benchmark: reduce with spread vs flatMap vs reduce with push

Script Preparation code:

const mockedObject = {
    a: { values: ['test1, test2, test3, test4'] },
    b: { values: '' },
    c: { values: [] }
 };

Tests:

reduce
const mockedObject = { a: { values: ['test1, test2, test3, test4'] }, b: { values: '' }, c: { values: [] } }; Object.entries(mockedObject).reduce((acc, curr) => { const [key, props] = curr; if (!props.values) return acc; return [...acc, props.values]; }, []);
flatMap
const mockedObject = { a: { values: ['test1, test2, test3, test4'] }, b: { values: '' }, c: { values: [] } }; Object.entries(mockedObject).flatMap(([key, props]) => { if (!props.values) return []; return props.values; });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce
flatMap

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36

Browser/OS: Chrome 124 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
reduce	5065548.5 Ops/sec
flatMap	3774825.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**What is tested?**

The provided JSON represents a benchmark that tests three different approaches for processing arrays in JavaScript:

1. `reduce` with spread syntax (`[...acc, props.values]`)
2. `flatMap`
3. `reduce` with `push` method

These approaches are compared to determine which one performs better in terms of execution speed.

**Options comparison**

Here's a brief overview of each approach and their pros and cons:

1. **Reduce with spread syntax**: This approach uses the spread operator (`[...acc, props.values]`) to concatenate arrays. The pros include:
	* Concise code
	* Easy to read and understand
	* Fast execution (since it's just array concatenation)
However, this approach has a con: it creates a new array, which can lead to increased memory usage.
2. **flatMap**: This approach uses the `flatMap()` method, which returns a new array with all sub-array elements flattened. The pros include:
	* No need to create a new array (since `flatMap()` modifies the original)
	* Can be more efficient than `reduce` in certain cases
However, this approach has a con: it may not be as readable or intuitive as `reduce`.
3. **Reduce with push**: This approach uses the `push()` method to concatenate arrays. The pros include:
	* No need to create a new array (since `push()` modifies the original)
	* Can be more memory-efficient than the spread syntax
However, this approach has a con: it's less readable and more verbose than the other two options.

**Other considerations**

When choosing an approach, consider the specific requirements of your use case:

* If you need to process large arrays, `reduce` with push might be the most efficient option.
* If readability is crucial, `flatMap` might be a better choice.
* If memory efficiency is important, `flatMap` or `reduce` with push might be better than the spread syntax.

**Library and special JS features**

There are no libraries used in this benchmark. However, some modern JavaScript engines (like V8) provide experimental features that can affect performance. For example:

* `flatMap()` was introduced in ECMAScript 2020, so it might not work in older browsers or environments.
* The spread syntax (`[...acc, props.values]`) is a relatively recent feature and might not be supported in older browsers.

**Alternative approaches**

Other approaches you might consider include:

* Using `Array.prototype.reduce()` with a callback function
* Using `Array.prototype.forEach()` with a custom loop
* Using third-party libraries like Lodash or Ramda for array processing

However, these alternatives might not provide the same level of performance as the built-in methods mentioned in the benchmark.

Related benchmarks:

reduce with spread vs flatMap vs reduce with push (version: 0)

reduce with spread vs flatMap vs reduce with push

Comparing performance of: reduce vs flatMap

Created: 2 years ago by: Guest

Jump to the latest result

reduce

flatMap

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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