Benchmark: Spread with map vs Array.from()

HTML Preparation code:

<div id="00"></div>
<div id="01"></div>
<div id="02"></div>
<div id="03"></div>
<div id="04"></div>
<div id="05"></div>
<div id="06"></div>
<div id="07"></div>
<div id="08"></div>
<div id="09"></div>
<div id="10"></div>
<div id="11"></div>
<div id="12"></div>
<div id="13"></div>
<div id="14"></div>
<div id="15"></div>
<div id="16"></div>
<div id="17"></div>
<div id="18"></div>
<div id="19"></div>
<div id="20"></div>
<div id="21"></div>
<div id="22"></div>
<div id="23"></div>
<div id="24"></div>
<div id="25"></div>
<div id="26"></div>
<div id="27"></div>
<div id="28"></div>
<div id="29"></div>
<div id="30"></div>
<div id="31"></div>
<div id="32"></div>
<div id="33"></div>
<div id="34"></div>
<div id="35"></div>
<div id="36"></div>
<div id="37"></div>
<div id="38"></div>
<div id="39"></div>
<div id="40"></div>
<div id="41"></div>
<div id="42"></div>
<div id="43"></div>
<div id="44"></div>
<div id="45"></div>
<div id="46"></div>
<div id="47"></div>
<div id="48"></div>
<div id="49"></div>
<div id="50"></div>
<div id="51"></div>
<div id="52"></div>
<div id="53"></div>
<div id="54"></div>
<div id="55"></div>
<div id="56"></div>
<div id="57"></div>
<div id="58"></div>
<div id="59"></div>
<div id="60"></div>
<div id="61"></div>
<div id="62"></div>
<div id="63"></div>
<div id="64"></div>
<div id="65"></div>
<div id="66"></div>
<div id="67"></div>
<div id="68"></div>
<div id="69"></div>
<div id="70"></div>
<div id="71"></div>
<div id="72"></div>
<div id="73"></div>
<div id="74"></div>
<div id="75"></div>
<div id="76"></div>
<div id="77"></div>
<div id="78"></div>
<div id="79"></div>
<div id="80"></div>
<div id="81"></div>
<div id="82"></div>
<div id="83"></div>
<div id="84"></div>
<div id="85"></div>
<div id="86"></div>
<div id="87"></div>
<div id="88"></div>
<div id="89"></div>
<div id="90"></div>
<div id="91"></div>
<div id="92"></div>
<div id="93"></div>
<div id="94"></div>
<div id="95"></div>
<div id="96"></div>
<div id="97"></div>
<div id="98"></div>
<div id="99"></div>

Script Preparation code:

const nodeList = document.querySelectorAll('div');

Tests:

Spread with map
const result = ([...nodeList]).map((node) => node.id);
Array.from with map
const result = Array.from(nodeList).map((node) => node.id);
Array.from with second parameter
const result = Array.from(nodeList, (node) => node.id);
for loop push
const result = []; for (let i = 0; i < nodeList.length; i++) { result.push(nodeList[i].id); }
for loop pre-allocate
const result = new Array(nodeList.length); for (let i = 0; i < nodeList.length; i++) { result[i] = nodeList[i].id; }
for loop pre-allocate cached length
const length = nodeList.length; const result = new Array(length); for (let i = 0; i < length; i++) { result[i] = nodeList[i].id; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread with map
Array.from with map
Array.from with second parameter
for loop push
for loop pre-allocate
for loop pre-allocate cached length

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 7 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Spread with map	91507.7 Ops/sec
Array.from with map	95276.0 Ops/sec
Array.from with second parameter	83111.0 Ops/sec
for loop push	194958.0 Ops/sec
for loop pre-allocate	216501.6 Ops/sec
for loop pre-allocate cached length	295437.1 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 12 days ago):

LLMs can make mistakes. Check important info.

In this benchmark from MeasureThat.net, various approaches to convert a `NodeList` (of HTML `<div>` elements) into an array of their IDs are compared. Specifically, the benchmark assesses the performance of several techniques in JavaScript for achieving this transformation.

### Approaches Compared

1. **Spread Syntax with `map`**:
   ```javascript
   const result = ([...nodeList]).map((node) => node.id);
   ```
   - **Pros**: 
     - Concise and readable.
     - Utilizes the spread operator to convert the `NodeList` directly into an array, which is a familiar syntactical feature.
   - **Cons**: 
     - May not be the most performant option, especially with larger datasets.

2. **`Array.from` with `map`**:
   ```javascript
   const result = Array.from(nodeList).map((node) => node.id);
   ```
   - **Pros**: 
     - More explicit in intent since `Array.from` is designed to create arrays from array-like structures.
   - **Cons**: 
     - Similar performance concerns as the spread syntax; involves two passes over the data.

3. **`Array.from` with a Mapping Function**:
   ```javascript
   const result = Array.from(nodeList, (node) => node.id);
   ```
   - **Pros**: 
     - This approach combines the array creation and mapping in one step, which can be more efficient.
     - The mapping function is passed as a second argument to `Array.from`, reducing overhead.
   - **Cons**: 
     - Still might be slower than manual loops for large data sets.

4. **For Loop with `push`**:
   ```javascript
   const result = [];
   for (let i = 0; i < nodeList.length; i++) {
       result.push(nodeList[i].id);
   }
   ```
   - **Pros**: 
     - Usually faster as it reduces overhead from method calls involved in `Array.from` and `map`.
   - **Cons**: 
     - Requires more lines of code and can be less clear than functional approaches.

5. **For Loop with Pre-allocated Array**:
   ```javascript
   const result = new Array(nodeList.length);
   for (let i = 0; i < nodeList.length; i++) {
       result[i] = nodeList[i].id;
   }
   ```
   - **Pros**: 
     - Improved performance by pre-allocating an array of the required length, avoiding dynamic resizing as elements are added.
   - **Cons**: 
     - Less readable for those unfamiliar with pre-allocation concepts.

6. **For Loop with Cached Length**:
   ```javascript
   const length = nodeList.length;
   const result = new Array(length);
   for (let i = 0; i < length; i++) {
       result[i] = nodeList[i].id;
   }
   ```
   - **Pros**: 
     - Fastest approach as it minimizes property lookups by caching the length of the `NodeList`.
     - Similar benefits as the previous method but with a further performance edge.
   - **Cons**: 
     - Involves a bit more complexity but conveys optimal performance practices.

### Performance Insights

The benchmark results show that the most efficient method was the "for loop pre-allocate cached length" which achieved the highest execution rate, emphasizing the effectiveness of minimizing lookups and utilizing pre-allocation when processing collections.

### Other Considerations

- **Library Usage**: In this benchmark, none of the approaches utilize external libraries; all solutions leverage built-in JavaScript features.
  
- **Modern Syntax**: The `spread` operator and `Array.from` are both features of JavaScript ES2015 (ES6) and later, which enhances code readability and syntactic brevity.

- **Alternative Approaches**: Other alternatives could include using methods from libraries like Lodash for more advanced manipulations or even considering alternative data structures (like sets) for different performance implications.

In conclusion, when selecting a method, it's essential to consider not only performance but also code clarity and maintainability, especially in a team environment or for less experienced developers. The iterative approach with pre-allocation tends to provide the best performance in bulk operations but might sacrifice some readability compared to functional programming constructs like `map`.

Related benchmarks:

Spread with map vs Array.from() (version: 1)

Comparing performance of: Spread with map vs Array.from with map vs Array.from with second parameter vs for loop push vs for loop pre-allocate vs for loop pre-allocate cached length

Created: 12 days ago by: Guest

Jump to the latest result

Spread with map

Array.from with map

Array.from with second parameter

for loop push

for loop pre-allocate

for loop pre-allocate cached length

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 12 days ago):