Benchmark: Extract prop from object array, shorter arrow function syntax

Script Preparation code:

var testArray = []
for(var i=0;i<100000;i++){
  testArray.push({ id: i, val: Math.random()});
}

Tests:

Using Array.prototype.map()
var vals = testArray.map(a => a.val);
Using traditional for loop
var vals=[]; for(var i=0;i<testArray.length;i++){ vals.push(testArray[i].val); }
Using ES6 for..of
var vals=[]; for(var item of testArray){ vals.push(item.val); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using Array.prototype.map()
Using traditional for loop
Using ES6 for..of

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

The provided JSON represents a JavaScript microbenchmarking test case on MeasureThat.net. The goal of this benchmark is to compare the performance of three different approaches for extracting the `val` property from an array of objects: traditional for loops, the `Array.prototype.map()` method with arrow function syntax, and the `for...of` loop.

Here's a brief overview of each approach:

1. **Traditional for loop**:
```javascript
var vals = [];
for (var i = 0; i < testArray.length; i++) {
  vals.push(testArray[i].val);
}
```
Pros: Simple and easy to understand.
Cons: Can be slower due to the overhead of the explicit loop control and array indexing.

2. **`Array.prototype.map()` method with arrow function syntax**:
```javascript
var vals = testArray.map(a => a.val);
```
Pros: Concise and expressive, leveraging the optimized `map()` method. The arrow function syntax can also reduce memory allocation overhead.
Cons: May incur additional overhead due to the creation of an intermediate array (unless explicitly using `map`'s callback option).

3. **ES6 `for...of` loop**:
```javascript
var vals = [];
for (const item of testArray) {
  vals.push(item.val);
}
```
Pros: More concise and modern than traditional for loops, with improved readability.
Cons: May have slightly slower performance due to the new syntax's parsing overhead.

Now, let's consider other alternatives:

* **Native JavaScript methods**: In addition to `map()`, other native methods like `forEach()` or `reduce()` could be used for this benchmark. However, these might not provide a significant performance difference.
* **Closures or higher-order functions**: Using closures or higher-order functions (e.g., `Array.prototype.forEach()` with a custom callback) could offer an alternative approach. However, their performance would likely be comparable to the traditional for loop.
* **Loop unrolling or iteration optimization techniques**: Optimizing loops by reducing the number of iterations or using specialized intrinsics (e.g., SIMD instructions) might yield better performance results.

The benchmark measures the execution speed of each approach, which is reflected in the `ExecutionsPerSecond` value. The browser and device platform information helps to understand the performance characteristics on different hardware configurations.

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:60.0) Gecko/20100101 Firefox/60.0

Browser/OS: Firefox 60 on Mac OS X 10.13

View result in a separate tab

Test name	Executions per second
Using Array.prototype.map()	484.9 Ops/sec
Using traditional for loop	466.3 Ops/sec
Using ES6 for..of	458.9 Ops/sec

Related benchmarks:

Extract prop from object array, shorter arrow function syntax (version: 0)

Comparing performance of: Using Array.prototype.map() vs Using traditional for loop vs Using ES6 for..of

Created: 6 years ago by: Guest

Jump to the latest result

Using Array.prototype.map()

Using traditional for loop

Using ES6 for..of

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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