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: 7 months ago by: Guest

Jump 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

Autogenerated LLM Summary (model llama3.2:3b, generated 24 days 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.

Latest run results:

Run details: (Test run date: 7 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Safari/605.1.15

Browser/OS: Safari 17 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Number 1: use for iterator	397949.8 Ops/sec
Number 2: use for-of iterator	10689301.0 Ops/sec
Number 3: use reduce	485417.9 Ops/sec
Number 3: Math.max with spread	4973738.5 Ops/sec

Related benchmarks:

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: 7 months ago by: Guest

Jump to the latest result

Number 1: use for iterator

Number 2: use for-of iterator

Number 3: use reduce

Number 3: Math.max with spread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 24 days ago):