Benchmark: map-reduce-loop3

Script Preparation code:

window.cols = Array.from({length: 20}).map(() => ({ style: { width: '123px' }}))

Tests:

map-reduce
const sum = cols .map(c => parseFloat(c.style.width)) .reduce((a, b) => a + b); console.log(sum)
loop of
let sum = 0 for (const c of cols) { sum += parseFloat(c.style.width) } console.log(sum)
loop
let sum = 0 for (let i = 0, l = cols.length; i < l; i++) { sum += parseFloat(cols[i].style.width) } console.log(sum)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map-reduce
loop of
loop

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 87 on Windows

View result in a separate tab

Test name	Executions per second
map-reduce	22160.0 Ops/sec
loop of	15117.8 Ops/sec
loop	17122.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The `map-reduce-loop3` benchmark tests three different approaches to perform a simple calculation: summing up the widths of 20 elements in an array. The benchmarks are:

1. `map-reduce`: Uses the `Array.prototype.map()` and `Array.prototype.reduce()` methods.
2. `loop of`: Uses a `for...of` loop with an iterator.
3. `loop`: Uses a traditional `for` loop.

**Script Preparation Code**

The script preparation code sets up an array `cols` containing 20 objects with a `style.width` property set to `'123px'`. This array will be used as input for the benchmarks.

**Html Preparation Code**

There is no html preparation code provided, which means that the benchmarking process does not involve any DOM-related interactions or asynchronous operations.

**Library and Features**

* `Array.prototype.map()` and `Array.prototype.reduce()`: These methods are part of the ECMAScript standard and do not require any additional libraries. They provide a concise way to perform element-wise transformations and aggregations on arrays, respectively.
* `for...of` loop: This is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). It allows for easier iteration over iterable objects, such as arrays.
* Traditional `for` loop: This is the oldest iteration method available in JavaScript.

**Pros and Cons**

1. `map-reduce`:
	* Pros: Concise code, efficient, easy to read.
	* Cons: May not be immediately intuitive for developers unfamiliar with array methods.
2. `loop of`:
	* Pros: Easy to understand, modern feature, good performance.
	* Cons: May require additional setup (e.g., defining the iterator) and is not as concise as other approaches.
3. `loop`:
	* Pros: Simple, easy to understand, no additional setup required.
	* Cons: Less efficient than array methods, more verbose.

**Other Alternatives**

* Using a `for` loop with an index variable (e.g., `let i = 0; for (; i < cols.length; i++)`) would be another option.
* Using `Array.prototype.forEach()` or `Array.prototype.every()` could also be used to perform the calculation, although they might not be as efficient.

In summary, the `map-reduce-loop3` benchmark allows users to compare the performance of three different approaches to sum up an array's elements. The choice of approach depends on personal preference, familiarity with modern JavaScript features, and desired level of conciseness.

Related benchmarks:

map-reduce-loop3 (version: 0)

Comparing performance of: map-reduce vs loop of vs loop

Created: 4 years ago by: Guest

Jump to the latest result

map-reduce

loop of

loop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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