Benchmark: array.from.map vs array.from with map

HTML Preparation code:

<div id='1'></div>
<div id='2'></div>
<div id='3'></div>
<div id='4'></div>
<div id='5'></div>
<div id='6'></div>
<div id='7'></div>
<div id='8'></div>
<div id='9'></div>
<div id='10'></div>

Script Preparation code:

var divs = document.querySelectorAll('div');

Tests:

array.from.map
Array.from(divs).map(div => div.id);
array.from with map
Array.from(divs, (div) => div.id)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
array.from.map
array.from with map

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 124 on Android

View result in a separate tab

Test name	Executions per second
array.from.map	324814.5 Ops/sec
array.from with map	293268.1 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided JSON represents a JavaScript microbenchmark test case on the MeasureThat.net website. The goal of this benchmark is to compare the performance of two approaches: using `Array.from` with an arrow function (`div => div.id`) and using `Array.from` followed by calling the `map()` method on the resulting array.

**Options being compared:**

1. **Using `Array.from(divs, (div) => div.id)`**: This approach creates a new array from the `divs` element collection and then uses an arrow function to transform each element into its `id` property.
2. **Using `Array.from(divs).map(div => div.id)`**: This approach creates a new array from the `divs` element collection using `Array.from`, and then applies the `map()` method to the resulting array, which also transforms each element into its `id` property.

**Pros and Cons:**

* **Using `Array.from(divs, (div) => div.id)`**:
	+ Pros: This approach is more explicit about the transformation being applied to each element, which can be beneficial for readability and maintainability.
	+ Cons: The arrow function syntax might make the code less readable for some developers, especially those not familiar with it. Additionally, this approach requires an extra function call (the arrow function), which could lead to slightly slower performance due to the overhead of creating a new function object.
* **Using `Array.from(divs).map(div => div.id)`**:
	+ Pros: This approach is more concise and arguably easier to read than the first option, as it uses a well-known method (`map()`) that immediately conveys the intent of transforming each element. Additionally, this approach avoids creating an extra function object.
	+ Cons: The explicit transformation using `map()` might make the code less readable for some developers who are not familiar with this pattern.

**Library used:**

The provided benchmark code uses the HTML5 `Array.prototype.from` method (implemented in WebKit) and the `map()` method, which is a part of the ECMAScript standard. The `Document.querySelectorAll('div')` method is used to retrieve an array-like object containing all `<div>` elements on the page.

**Special JS feature or syntax:**

None mentioned in this benchmark. However, it's worth noting that `Array.prototype.from()` and `map()` are part of ECMAScript standard, which means they are supported by most modern JavaScript engines.

**Other alternatives:**

Other approaches to achieve similar results could include using:

* Loops (e.g., `for` loop or `forEach` method)
* Other array methods like `reduce()`, `filter()`, or `every()`
* Using a library or framework that provides optimized implementations for these operations

Keep in mind that the performance differences between these approaches are likely to be very small, and other factors like the specific use case, data size, and JavaScript engine being used may have more significant impacts on performance.

Related benchmarks:

array.from.map vs array.from with map (version: 0)

Comparing performance of: array.from.map vs array.from with map

Created: 4 months ago by: Guest

Jump to the latest result

array.from.map

array.from with map

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