Benchmark: JS map reduce inner array perf double reduce

HTML Preparation code:

<div id='min-data'></div>

Tests:

with map
const div = document.getElementById('min-data'); const products = []; for(let x = 0; x < 5;x++){ let product = {id: x, features:[]} for(let i = 0; i < 1000; i++){ const num = Math.floor(Math.random() * 1000); product.features.push({properties:{selected: num}}); } products.push(product)} let maxVal = products .map((p) => { return p.features .map((f) => { return f.properties.selected; }) .flat(); }) .flat() .reduce((a, b) => (a > b ? a : b), 0); div.innerHTML = maxVal.toString();
with reduce
const div = document.getElementById('min-data'); const products = []; for(let x = 0; x < 5;x++){ let product = {id: x, features:[]} for(let i = 0; i < 1000; i++){ const num = Math.floor(Math.random() * 1000); product.features.push({properties:{selected: num}}); } products.push(product)} let maxVal = products .map((p) => { return p.features.reduce( (a, b) => a > b.properties.selected ? a : b.properties.selected, 0 ); }).reduce((a, b) => (a > b ? a : b), 0); div.innerHTML = maxVal.toString();
double reduce
const div = document.getElementById('min-data'); const products = []; for(let x = 0; x < 5;x++){ let product = {id: x, features:[]} for(let i = 0; i < 1000; i++){ const num = Math.floor(Math.random() * 1000); product.features.push({properties:{selected: num}}); } products.push(product)} let maxVal = products.reduce((currMax, product) => { let inMax = product.features.reduce( (fMax, f) => (fMax > f.properties.selected ? fMax : f.properties.selected), 0 ); return currMax > inMax ? currMax : inMax; }, 0); div.innerHTML = maxVal.toString();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
with map
with reduce
double reduce

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.

**Benchmark Overview**

The provided benchmark measures the performance of three different approaches to find the maximum value in an array of objects:

1. **Map**: Using `Array.prototype.map()` to create a new array with transformed values, and then finding the maximum value using `Math.max()`.
2. **Reduce**: Using `Array.prototype.reduce()` to iterate over the array and find the maximum value.
3. **Double Reduce**: An alternative implementation of the reduce approach.

**Options Compared**

The benchmark compares the performance of these three approaches:

*   **Map**: This approach uses `map()` to create a new array with transformed values, which can be slower due to the overhead of creating a new array.
*   **Reduce**: This approach uses `reduce()` to iterate over the array and find the maximum value. It is generally faster than map() because it avoids the overhead of creating a new array.
*   **Double Reduce**: This approach is similar to reduce(), but with an additional iteration to compare values within each object's features array.

**Pros and Cons**

*   **Map**:
    *   Pros: Easy to understand, concise code. Can be faster for smaller arrays due to caching optimizations in modern browsers.
    *   Cons: Creates a new array, which can lead to slower performance for larger arrays.
*   **Reduce**:
    *   Pros: Faster than map() for large arrays, avoids creating a new array.
    *   Cons: More complex code, harder to understand for some developers.
*   **Double Reduce**:
    *   Pros: Similar speed to reduce(), with an additional iteration for comparison within each object's features array.
    *   Cons: Doubles the number of iterations compared to reduce(), which can impact performance.

**Library and Purpose**

In this benchmark, no specific library is used. However, in general:

*   `Array.prototype.map()` and `Array.prototype.reduce()` are built-in methods that come with JavaScript's standard library.
*   Modern browsers also provide optimizations for these methods, such as caching and parallel processing, which can impact performance.

**Special JS Feature/Syntax**

This benchmark does not use any special JavaScript features or syntax. It uses only standard JavaScript syntax and built-in methods.

**Alternative Approaches**

Other alternative approaches to finding the maximum value in an array of objects could include:

*   **Looping manually**: Using a traditional for loop to iterate over the array and compare values.
*   **Using `Math.max()` with spread operator**: Using `Math.max()` with the spread operator (`...`) to find the maximum value.

However, these approaches would likely be slower than the use of built-in methods like `map()`, `reduce()`, or a custom implementation.

Related benchmarks:

JS map reduce inner array perf double reduce (version: 0)

Comparing performance of: with map vs with reduce vs double reduce

Created: 3 years ago by: Guest

Jump to the latest result

with map

with reduce

double reduce

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