Benchmark: Array.from(NodeList).map vs [...NodeList].map vs map.call(NodeList) vs. NodeList#map copied from Array vs for loop

Script Preparation code:

NodeList.prototype.map = Array.prototype.map;
window.list = document.querySelectorAll('div');
window.mapper = node => node.outerHTML;

Tests:

Array.from(NodeList).map
Array.from(list).map(mapper);
[...NodeList].map
[...list].map(mapper);
map.call(NodeList)
Array.prototype.map.call(list, mapper);
NodeList#map
list.map(mapper);
for loop
const result = []; for (let i = 0; i < list.length; i++) result.push(mapper(list[i], i, list));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from(NodeList).map
[...NodeList].map
map.call(NodeList)
NodeList#map
for loop

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 126 on Windows

View result in a separate tab

Test name	Executions per second
Array.from(NodeList).map	400752.2 Ops/sec
[...NodeList].map	536681.7 Ops/sec
map.call(NodeList)	476561.5 Ops/sec
NodeList#map	526620.0 Ops/sec
for loop	406663.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided benchmark tests four different methods for mapping over an HTML NodeList:

1. `Array.from(list).map(mapper)`
2. ` [...list].map(mapper)` (using spread operator)
3. `Array.prototype.map.call(list, mapper)`
4. `list.map(mapper)` (directly on the NodeList prototype)
5. A for loop with a mapped array

**Library Used**

The benchmark uses the `Array.from` method and the `map()` function from the Array prototype.

* `Array.from` is a static method of the Array class, introduced in ECMAScript 2015 (ES6). It creates a new Array instance from an iterable or an array-like object.
* The `map()` function is a built-in method of the Array prototype, also introduced in ES6. It creates a new array with the results of applying a provided function to every element in this array.

**Special JavaScript Feature/Syntax**

None, but it's worth noting that the spread operator (`[...list]`) is used in two of the benchmarks (2 and 3).

**Benchmark Comparison**

The four methods being tested have different performance characteristics:

* **`Array.from(list).map(mapper)`**: This method creates a new Array instance from the NodeList using `Array.from()`, which has an overhead. The `map()` function is then applied to this array, resulting in a slow operation.
* **`[...list].map(mapper)`**: Using the spread operator and applying `map()` directly to the NodeList can be faster than creating a new Array instance. However, it may not be as efficient as using `Array.prototype.map.call()`.
* **`Array.prototype.map.call(list, mapper)`**: This method uses the `call()` function to invoke `map()` on the NodeList prototype, which is likely to be slower than calling `map()` directly on an array.
* **`list.map(mapper)`**: Directly calling `map()` on the NodeList prototype can be faster than the other methods, as it avoids the overhead of creating a new Array instance or invoking a function.

**Pros and Cons**

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

* **`Array.from(list).map(mapper)`**: Pros: creates a new Array instance that can be reused; Cons: has an overhead, slow.
* **`[...list].map(mapper)`**: Pros: avoids creating a new Array instance; Cons: may not be as efficient as using `Array.prototype.map.call()`.
* **`Array.prototype.map.call(list, mapper)`**: Pros: uses the optimized `map()` function on the NodeList prototype; Cons: likely slower than calling `map()` directly.
* **`list.map(mapper)`**: Pros: avoids overhead of creating a new Array instance or invoking a function; Cons: may not work in older browsers.

**Other Alternatives**

Some other alternatives for mapping over an array-like object like a NodeList include:

* Using the `forEach()` method instead of `map()`, which can be more efficient for small arrays.
* Using a library like Lodash's `mapValues` function, which can provide better performance and flexibility.

However, it's worth noting that these alternatives may not be as widely supported or optimized as the built-in methods used in the benchmark.

Related benchmarks:

Array.from(NodeList).map vs [...NodeList].map vs map.call(NodeList) vs. NodeList#map copied from Array vs for loop (version: 0)

Different methods of mapping a node list.

Comparing performance of: Array.from(NodeList).map vs [...NodeList].map vs map.call(NodeList) vs NodeList#map vs for loop

Created: 4 years ago by: Registered User

Jump to the latest result

Array.from(NodeList).map

[...NodeList].map

map.call(NodeList)

NodeList#map

for loop

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