Benchmark: Extract prop from object array

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) => {return 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.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the provided JSON and explore what's being tested.

**Benchmark Definition**

The benchmark definition is about extracting a property (`val`) from an array of objects. The preparation code creates an array `testArray` with 100,000 objects, each having an `id` and a random `val`.

**Test Cases**

There are three individual test cases, comparing different approaches to extract the `val` property:

1. **Using Array.prototype.map()**
	* Code: `var vals = testArray.map((a) => {return a.val});`
	* This approach uses the `map()` method on the array, which creates a new array with the result of applying a provided function to each element.
2. **Using traditional for loop**
	* Code: `var vals=[]; for(var i=0;i<testArray.length;i++) { vals.push(testArray[i].val); }`
	* This approach uses a classic `for` loop to iterate over the array, pushing the extracted value into a new array.
3. **Using ES6 for..of**
	* Code: `var vals=[]; for(var item of testArray) { vals.push(item.val); }`
	* This approach uses the `for...of` loop introduced in ECMAScript 2015 (ES6), which allows iterating over iterable objects, such as arrays.

**Benchmark Results**

The latest benchmark results show the execution speed (Executions Per Second) for each test case on a Firefox 60 browser:

1. Using Array.prototype.map(): 532.83 EPS
2. Using ES6 for..of: 501.09 EPS
3. Using traditional for loop: 441.92 EPS

**What's being tested?**

In this benchmark, we're testing the performance of different approaches to extract a property (`val`) from an array of objects.

**Pros and Cons of each approach**

1. **Array.prototype.map()**
	* Pros:
		+ Easy to read and write.
		+ Suitable for situations where you need to transform the data.
	* Cons:
		+ Might be slower than traditional loops due to the overhead of creating a new array.
2. **Traditional for loop**
	* Pros:
		+ Often faster than `map()` or `for...of` due to less overhead.
		+ Suitable when you need fine-grained control over iteration.
	* Cons:
		+ More verbose and harder to read.
3. **ES6 for..of**
	* Pros:
		+ A concise way to iterate over arrays, making the code easier to read.
		+ Less overhead than traditional loops.
	* Cons:
		+ Not as widely supported in older browsers.
		+ Might be slower due to the overhead of creating an iterator.

**Other considerations**

When choosing an approach, consider factors like:

* Code readability and maintainability
* Performance requirements (e.g., if you need maximum speed, traditional loops might be a better choice)
* Browser support (if you're targeting older browsers, traditional loops or `map()` might be safer choices)

**Libraries or special JS features**

There are no libraries mentioned in the provided JSON. The test cases only use built-in JavaScript functionality.

That's it! I hope this explanation helps you understand what's being tested and what the pros and cons of each approach are.

Related benchmarks:

Extract prop from object array (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.1:latest, generated one year ago):