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

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

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:77.0) Gecko/20100101 Firefox/77.0

Browser/OS: Firefox 77 on Windows

View result in a separate tab

Test name	Executions per second
Array.from(NodeList).map	389891.3 Ops/sec
[...NodeList].map	503313.9 Ops/sec
map.call(NodeList)	548358.4 Ops/sec
NodeList#map	564857.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its test cases.

**Benchmark Definition:**
The benchmark is designed to compare different methods of mapping a NodeList, which is a collection of DOM nodes. The NodeList prototype method `map()` is compared with four alternative approaches:

1. `Array.from(NodeList).map()`
2. `[...NodeList].map()`
3. `Array.prototype.map.call(NodeList)`
4. `list.map(mapper)` where `list` is a reference to the NodeList and `mapper` is a function that converts each node to its outerHTML.

**Options Compared:**

1. **Array.from(NodeList).map()**: This approach uses the `Array.from()` method to create an array from the NodeList, and then calls the `map()` method on it.
2. **[...NodeList].map()**: This approach uses the spread operator (`[...]`) to convert the NodeList to an array, and then calls the `map()` method on it.
3. **Array.prototype.map.call(NodeList)**: This approach uses the `call()` method to bind the `map()` method of the Array prototype to the NodeList as its this value.
4. **list.map(mapper)**: This approach directly calls the `map()` method on the NodeList reference, passing a function (`mapper`) that converts each node to its outerHTML.

**Pros and Cons of Each Approach:**

1. **Array.from(NodeList).map()**:
	* Pros: Creates an array from the NodeList, which can be more predictable and efficient for certain use cases.
	* Cons: May incur additional overhead due to the creation of a new array.
2. **[...NodeList].map()**:
	* Pros: Avoids creating an intermediate array and is often faster and more memory-efficient.
	* Cons: Requires support for the spread operator (`[...]`) in older browsers.
3. **Array.prototype.map.call(NodeList)**:
	* Pros: Provides a clear and explicit way to call `map()` on a NodeList, even if it doesn't have the prototype chain.
	* Cons: May be less intuitive and readable than the other approaches.
4. **list.map(mapper)**:
	* Pros: Directly calls the `map()` method on the NodeList reference, which can be more concise and expressive.
	* Cons: May not be as efficient or predictable as the first two approaches.

**Special Considerations:**

The benchmark uses a function (`mapper`) to convert each node to its outerHTML. This is likely done for testing purposes only, as it's not a typical use case for the `map()` method.

**Library Usage:**
None of the test cases explicitly use any external libraries.

**Special JS Features or Syntax:**
The spread operator (`[...]`) is used in one of the approaches (`[...NodeList].map()`). This feature was introduced in ECMAScript 2015 and has been widely adopted by modern browsers.

**Alternatives:**

Other ways to map a NodeList include:

1. Using a loop with `forEach()` or `for` loops.
2. Using an array constructor like `new Array()` followed by `push()` or spread operator (`[...list]`) followed by `map()`.
3. Using a library like Lodash or Ramda, which provide utility functions for mapping arrays and NodeList.

In summary, the benchmark compares four different approaches to mapping a NodeList in JavaScript, highlighting the pros and cons of each approach and considering special considerations, library usage, and alternative methods.

Related benchmarks:

Array.from(NodeList).map vs [...NodeList].map vs map.call(NodeList) vs. NodeList#map copied from Array (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

Created: 4 years ago by: Guest

Jump to the latest result

Array.from(NodeList).map

[...NodeList].map

map.call(NodeList)

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