Benchmark: array.from.map vs array.from with map vs spread 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);
spread with map
[...divs].map(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
spread with map

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 128 on Windows

View result in a separate tab

Test name	Executions per second
array.from.map	378519.7 Ops/sec
array.from with map	356494.6 Ops/sec
spread with map	424878.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Overview**

MeasureThat.net is a website where users can create and run JavaScript microbenchmarks to compare the performance of different approaches. The provided JSON represents a benchmark with three test cases: `array.from.map`, `array.from with map`, and `spread with map`. We'll explore what's being tested, the pros and cons of each approach, and discuss other alternatives.

**Test Cases**

The test cases are designed to measure the performance of different ways to create an array from a collection of elements and then apply a mapping function. The collections consist of 10 HTML `<div>` elements with `id` attributes.

1. **array.from.map**: This test case uses `Array.from()` to create an array from the `divs` collection and then applies the `map()` method to extract the `id` attribute.
2. **array.from with map**: Similar to the previous one, but uses the arrow function syntax `(div) => div.id` instead of a traditional function declaration.
3. **spread with map**: This test case uses the spread operator (`[...divs]`) to create an array from the `divs` collection and then applies the `map()` method.

**Options Compared**

The main options being compared are:

* Using `Array.from()` vs the spread operator (`[...]`)
* Using arrow function syntax `(div) => div.id` vs traditional function declarations

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **array.from()**:
	* Pros: Explicitly creates an array, easy to understand for beginners.
	* Cons: Can be slower due to the additional overhead of creating an array.
2. **array.from with map** (arrow function):
	* Pros: Concise and readable syntax, can be faster than traditional `map()` calls.
	* Cons: May have slightly higher performance due to the arrow function's implementation.
3. **spread with map**:
	* Pros: Can be faster due to the reduced overhead of array creation.
	* Cons: Less explicit and may require more mental effort to understand.

**Libraries and Special JS Features**

There are no libraries used in this benchmark, but if we were to use a library like Lodash, it might be useful for creating an array from a collection with `lodash.each()` or `lodash.map()`. However, these functions would likely not impact the performance comparison as much as the differences between `Array.from()`, arrow function syntax, and the spread operator.

**Special JS Features**

There are no special JavaScript features being tested in this benchmark. The focus is on understanding the trade-offs of different array creation methods and mapping approaches.

**Other Alternatives**

If you're interested in exploring other alternatives, here are a few options:

* Using `Array.prototype.slice()` or `Array.prototype.filter()` to create an array from a collection.
* Comparing the performance of using `for...of` loops versus traditional `for` loops for iterating over collections.

Keep in mind that these alternative approaches might not be directly comparable to the original test cases, but they could provide additional insights into different aspects of JavaScript performance and optimization.

Related benchmarks:

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

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

Created: one year ago by: Guest

Jump to the latest result

array.from.map

array.from with map

spread with map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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