Benchmark: map + max vs reduce + compare vs map + max

Script Preparation code:

var values = new Array(5000);

for (let i = 0; i < values.length; ++i) {
    values[i] = { val: i % 20 };
}

Tests:

Math.max
return Math.max(...values.map(x => x.val));
Reduce with compare
return values.reduce((prev, curr) => { if (curr.val > prev) return curr.val; return prev; }, 0);
Reduce with max
return values.reduce((prev, curr) => { return Math.max(prev, curr.val); }, 0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Math.max
Reduce with compare
Reduce with max

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.

I'll break down the benchmark and explain what's being tested, compared options, pros and cons of each approach, and other considerations.

**Benchmark Overview**

The benchmark measures performance differences between three approaches for finding the maximum value in an array:

1. Using `Math.max()` with a mapping function (`map + max`)
2. Using `Array.prototype.reduce()` with a comparison callback (`reduce + compare`)
3. Using `Array.prototype.reduce()` without comparing values (`reduce + max`)

**Library: Lodash**

In the benchmark, the `reduce` method is used from the Lodash library, which provides a consistent and efficient way to reduce arrays.

**Special JS Feature: Arrow Functions**

The benchmark uses arrow functions (e.g., `x => x.val`) for mapping and comparison callbacks. This feature was introduced in ECMAScript 2015 and allows for concise, readable code without defining traditional function expressions.

**Approach Comparison**

Here's a brief summary of each approach:

1. **`map + max`**: Maps the array to extract values, then uses `Math.max()` to find the maximum value.
	* Pros: Easy to understand, simple code.
	* Cons: May incur additional overhead for mapping and creating intermediate arrays.
2. **`reduce + compare`**: Uses `Array.prototype.reduce()` with a comparison callback to iterate through the array and find the maximum value.
	* Pros: Efficient, as it avoids creating intermediate arrays.
	* Cons: May be less readable due to the comparison callback.
3. **`reduce + max`**: Uses `Array.prototype.reduce()` without comparing values, effectively finding the maximum value using a simple accumulator update.
	* Pros: Similar efficiency to `reduce + compare`, but with more concise code.
	* Cons: Less intuitive than `reduce + compare` due to not explicitly comparing values.

**Other Considerations**

* **Browser and Device Platform**: The benchmark is run on a Chrome 99 browser on Windows Desktop, which might not be representative of other browsers or devices.
* **Execution Frequency**: The benchmark measures executions per second, which can impact performance. Higher execution frequencies often require more efficient code.

**Alternatives**

If you were to rewrite this benchmark with alternative approaches:

1. Use `Array.prototype.forEach()` and find the maximum value manually.
2. Use `Array.prototype.reduce()` without a callback function or using a different accumulator update strategy.
3. Explore other libraries, like `lodash-es` (a subset of Lodash), for improved performance.

Keep in mind that benchmarking performance is an art, as results can vary depending on the environment and hardware. These alternatives might offer trade-offs between readability, performance, and code complexity.

Related benchmarks:

map + max vs reduce + compare vs map + max (version: 0)

Comparing performance of: Math.max vs Reduce with compare vs Reduce with max

Created: 4 years ago by: Guest

Jump to the latest result

Math.max

Reduce with compare

Reduce with max

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