Benchmark: reduce spread push vs flatmap

Script Preparation code:

var arr = Array(10_000).fill(0)
function getErrors() {
  const num = Math.floor(Math.random() * 4);
  return Array(num).fill("string");
}

Tests:

flatMap
arr.flatMap(x => getErrors())
reduce spread push
arr.reduce((errors, x) => { errors.push(...getErrors()); return errors; }, [])
reduce append
arr.reduce((errors, x) => { errors.concat(getErrors()); return errors; }, [])

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
flatMap
reduce spread push
reduce append

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Windows

View result in a separate tab

Test name	Executions per second
flatMap	304.6 Ops/sec
reduce spread push	303.0 Ops/sec
reduce append	303.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 JavaScript microbenchmark, MeasureThat.net.

**What is tested?**

The provided benchmark tests three different approaches to perform an operation on an array of 10,000 elements:

1. `flatMap(x => getErrors())`: This approach uses the `flatMap` method to create a new array with the results of applying the `getErrors` function to each element.
2. `reduce((errors, x) => {\r\n  errors.push(...getErrors());\r\n  return errors;\r\n}, [])`: This approach uses the `reduce` method to iterate over the array and accumulate an array of errors in a single array.
3. `reduce((errors, x) => {\r\n  errors.concat(getErrors());\r\n  return errors;\r\n}, [])`: This approach is similar to the previous one but uses the `concat` method to concatenate arrays instead of pushing elements.

**Options compared**

The three approaches are compared in terms of their performance, which is measured by the number of executions per second. The test cases aim to determine which approach is fastest and most efficient.

**Pros and Cons**

Here's a brief summary of each approach:

1. `flatMap(x => getErrors())`:
	* Pros: Creates a new array with the results, avoids modifying the original array.
	* Cons: May be less efficient due to the overhead of creating a new array.
2. `reduce((errors, x) => {\r\n  errors.push(...getErrors());\r\n  return errors;\r\n}, [])`:
	* Pros: Accumulates errors in a single array, can be more efficient for larger datasets.
	* Cons: Modifies the original array by pushing new elements to it.
3. `reduce((errors, x) => {\r\n  errors.concat(getErrors());\r\n  return errors;\r\n}, [])`:
	* Pros: Avoids modifying the original array like the first approach, uses concatenation instead of push.
	* Cons: Concatenating arrays can be less efficient than pushing elements.

**Library and purpose**

The `flatMap` method is a part of the ECMAScript standard (ES6+), and its purpose is to create a new array with the results of applying a transformation function to each element. The `concat` method is also part of the ECMAScript standard (ES5+) and returns a new array containing all elements from the specified arrays.

**Special JavaScript feature or syntax**

There are no special features or syntax used in this benchmark that would require expertise beyond basic JavaScript knowledge.

**Other alternatives**

If you were to implement these approaches, here's an alternative implementation using `forEach` instead of `map`/`flatMap`:

```javascript
arr.forEach(x => {
  x.push(...getErrors());
});
```

This approach achieves the same result as the `reduce` method but uses a simpler loop.

In summary, MeasureThat.net provides a useful benchmarking tool for JavaScript developers to compare the performance of different approaches to performing operations on arrays. The three tested methods demonstrate trade-offs between creating new arrays and modifying existing ones.

Related benchmarks:

reduce spread push vs flatmap (version: 0)

Comparing performance of: flatMap vs reduce spread push vs reduce append

Created: one year ago by: Guest

Jump to the latest result

flatMap

reduce spread push

reduce append

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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