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

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.

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.

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

Fastest: N/A

Slowest: N/A

No previous run results

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