Benchmark: Javascript: reduce VS for with Math.max

Javascript: reduce VS for with Math.max (version: 0)

Compare the "reduce" method with "for" iteration and "for-of" iteration. We try to find the maximum value in a list of number. I also added Math.max with the spread operator.

Comparing performance of: `Number 1: use for iterator vs Number 2: use for-of iterator vs Number 3: use reduce vs Number 3: Math.max with spread`

Created: 2 years ago by: Guest

Go to the latest result

Script Preparation code:

var list = [261,237,169,165,20,351,108,491,480,465,453,306,280,244,210,391,60,419,391,164,303,31,370,359,208,313,383,219,256,192,314,198,337,198,416,157,462,183,309,193,192,262,244,421,45,204,287,426,239,214];

Tests:

Number 1: use for iterator
let largest = -1; for (let i = 0; i < list.length; i++) { if (list[i] > largest) { largest = list[i]; } }
Number 2: use for-of iterator
let largest = -1; for (const item of list) { if (item > largest) { largest = item; } }
Number 3: use reduce
const largest = list.reduce((a,b) => Math.max(a, b));
Number 3: Math.max with spread
const largest = Math.max(...list);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Number 1: use for iterator
Number 2: use for-of iterator
Number 3: use reduce
Number 3: Math.max with spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36

Browser/OS: Chrome 136 on Linux

View result in a separate tab

Number 3: use reduce

105.0M/s

Number 2: use for-of iterator

27.3M/s

Number 3: Math.max with spread

13.8M/s

Number 1: use for iterator

11.1M/s

View exact numbers

Test name	Executions per second
✓ Number 3: use reduce	105,021,144 Ops/sec
Number 2: use for-of iterator	27,318,910 Ops/sec
Number 3: Math.max with spread	13,797,237 Ops/sec
Number 1: use for iterator	11,066,683 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its results.

**Benchmark Definition**

The benchmark compares four different approaches to find the maximum value in an array of numbers:

1. **For iterator**: Using a traditional `for` loop with manual indexing.
2. **For-of iterator**: Using the `for...of` loop syntax, which automatically iterates over the array elements.
3. **Reduce**: Using the `reduce()` method, which applies a callback function to each element in the array and returns the accumulated value.
4. **Math.max with spread**: Using the `Math.max()` function with the spread operator (`...`) to find the maximum value.

**Options Compared**

The benchmark compares the performance of these four approaches:

* For iterator ( manual indexing)
* For-of iterator ( automatic iteration)
* Reduce ( accumulating values using a callback function)
* Math.max with spread ( using the `Math.max()` function with the spread operator)

**Pros and Cons of Each Approach**

1. **For iterator**:
	* Pros: Simple, easy to understand, and can be useful for specific use cases.
	* Cons: Requires manual indexing, which can lead to errors if not done correctly.
2. **For-of iterator**:
	* Pros: Automatic iteration, less prone to errors, and easier to read.
	* Cons: May have performance overhead due to the interpreter's overhead in handling the loop.
3. **Reduce**:
	* Pros: Efficient, concise, and can be used for more complex operations.
	* Cons: May be unfamiliar to developers who haven't worked with it before.
4. **Math.max with spread**:
	* Pros: Concise, easy to understand, and can be used for finding maximum values in arrays.
	* Cons: May not be as flexible as the `reduce()` method, and its performance may vary depending on the browser implementation.

**Library Used**

None of the benchmark definitions use a specific library beyond the built-in JavaScript functions (`Math.max()`, `Array.prototype.reduce()`, and `Array.prototype.forEach()`).

**Special JS Feature or Syntax**

There is no special JavaScript feature or syntax used in these benchmark definitions. They only utilize standard JavaScript features.

**Other Alternatives**

For finding the maximum value in an array, other alternatives could include:

* Using a `Map` data structure to store the values and their indices, then finding the key with the maximum value.
* Using a `PriorityQueue` implementation (if available) to efficiently find the maximum value.
* Implementing a custom sorting algorithm to find the maximum value.

However, these alternatives may not be as concise or efficient as the methods used in the benchmark definitions.

**Benchmark Results**

The benchmark results show that:

1. For-of iterator is slightly faster than for iterator.
2. Math.max with spread is faster than reduce.
3. Reduce is slower than both for iterators and Math.max with spread, but still relatively fast.

Keep in mind that these results may vary depending on the specific browser implementation, version, and hardware configuration used for the benchmarking.