Benchmark: map/filter vs reduce/spread vs reduce/mutate

Script Preparation code:

var values = new Array(10_000).fill(0).map((_, i) => i);

Tests:

map/filter
const result = values.map(v => v + 1).filter(v => v % 2 === 0)
reduce/spread
const result = values.reduce((acc, val) => { const r = val + 1; if (r % 2 === 0) return [...acc, r] return acc }, [])
reduce/mutate
const result = values.reduce((acc, val) => { const r = val + 1; if (r % 2 === 0) acc.push(r) return acc }, [])

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map/filter
reduce/spread
reduce/mutate

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 119 on Windows

View result in a separate tab

Test name	Executions per second
map/filter	5419.3 Ops/sec
reduce/spread	144.3 Ops/sec
reduce/mutate	35301.1 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a JavaScript microbenchmarking test case, where users can compare the performance of different approaches for filtering and reducing an array of numbers.

**Script Preparation Code**

The script preparation code is used to initialize the benchmark variables. In this case, it creates an array `values` with 10,000 elements, filled with zeros, using the `Array.prototype.fill()` method. The `map()` method is then applied to the array, mapping each element to its index in the original array.

**Individual Test Cases**

There are three test cases:

1. **Map/Filter**: This test case uses the `map()` and `filter()` methods to create a new array with elements that meet a certain condition (i.e., even indices).
2. **Reduce/Spread**: This test case uses the `reduce()` method with an arrow function to accumulate values in an array, and then uses the spread operator (`...`) to add more values to the accumulator.
3. **Reduce/Mutate**: This test case uses the `reduce()` method with an arrow function to mutate the accumulator directly by pushing new values onto it.

**Library: Array.prototype.reduce()**

The `Array.prototype.reduce()` method is used in all three test cases. It's a built-in JavaScript method that applies a function against an accumulator and each element of the array (from left to right) to reduce it to a single output value.

**Other Considerations**

* **Order of Operations**: In the `reduce/spread` and `reduce/mutate` tests, the order of operations is important. The spread operator (`...`) is used to add more values to the accumulator, while in the `reduce/mutate` test, new values are pushed onto the accumulator directly.
* **Memory Allocation**: The `map()` method creates a new array with the filtered elements, which can lead to increased memory allocation compared to using `reduce()` or other approaches that avoid creating new arrays.

**Pros and Cons of Each Approach**

1. **Map/Filter**:
	* Pros: Simple to understand and implement, no memory allocation concerns.
	* Cons: Creates a new array, potentially leading to performance issues with large datasets.
2. **Reduce/Spread**:
	* Pros: Can be more efficient than `map()` and `filter()`, as it avoids creating a new array.
	* Cons: Requires careful handling of the spread operator (`...`) to avoid unnecessary allocations.
3. **Reduce/Mutate**:
	* Pros: Avoids creating a new array, which can improve performance for large datasets.
	* Cons: Requires modifying the accumulator directly, which can lead to unexpected behavior if not handled carefully.

**Alternatives**

Other approaches that could be used in this benchmark include:

1. Using `forEach()` instead of `map()`
2. Implementing a custom filtering function using `Array.prototype.forEach()` and `if` statements
3. Using `Lodash` or other utility libraries to simplify the implementation

However, these alternatives may not provide the same level of performance as the approaches used in the benchmark, and are likely to have different trade-offs in terms of complexity and maintainability.

Related benchmarks:

map/filter vs reduce/spread vs reduce/mutate (version: 0)

Comparing performance of: map/filter vs reduce/spread vs reduce/mutate

Created: 2 years ago by: Guest

Jump to the latest result

map/filter

reduce/spread

reduce/mutate

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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