Benchmark: Array.from() vs Rest operator ([...])

HTML Preparation code:

<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Tests:

Array.from()
for (let i=0; i < 100; i++) { const items = Array.from(document.querySelectorAll('.list li')); const values = items.map(i => i.textContent); }
Spread [...]
for (let i=0; i < 100; i++) { const items = [...document.querySelectorAll('.list li')]; const values = items.map(i => i.textContent); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from()
Spread [...]

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:126.0) Gecko/20100101 Firefox/126.0

Browser/OS: Firefox 126 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Array.from()	6414.2 Ops/sec
Spread [...]	6581.7 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 on MeasureThat.net.

**Benchmark Overview**

The benchmark compares two approaches to convert an HTML list to an array: `Array.from()` and the spread operator (`[...]`). The test case uses an existing library, jQuery, which is not explicitly mentioned in the provided code but is implied by the use of `document.querySelectorAll()`. We'll discuss the pros and cons of each approach as well as other considerations.

**Benchmark Definitions**

The benchmark consists of two individual test cases:

1. **Array.from()**: This test case uses `Array.from()` to convert an HTML list to an array. The script prepares the HTML by creating a `<ul>` element with five `<li>` elements, and then uses `document.querySelectorAll()` to select all `<li>` elements.
2. **Spread [...]**: This test case uses the spread operator (`[...]`) to achieve the same result as `Array.from()`. Again, the script prepares the HTML in the same way.

**Pros and Cons**

Both approaches have their advantages:

*   **Array.from()**:
    *   Pros:
        *   Well-established method with good browser support.
        *   More explicit and readable code.
        *   Can be used for other array-related operations (e.g., `Array.from([1, 2, 3])`).
    *   Cons:
        *   Requires the polyfill or native implementation of `Array.from()` in older browsers.
*   **Spread [...]**:
    *   Pros:
        *   More concise and expressive code.
        *   Native support in modern browsers (ES6+).
        *   Can be used for other spread-related operations (e.g., `{...obj, ...arr}`).

**Other Considerations**

In addition to the pros and cons mentioned above, consider the following factors when choosing between `Array.from()` and the spread operator:

*   **Browser Support**: The spread operator has better support in modern browsers. If you need to target older browsers, use `Array.from()`.
*   **Performance**: Modern JavaScript engines (e.g., V8) are optimized for the spread operator. However, if you're targeting very old browsers or need better performance for specific workloads, `Array.from()` might be a better choice.
*   **Code Readability and Maintainability**: Choose the approach that makes your code more readable and maintainable.

**Library Usage**

The benchmark uses jQuery's `document.querySelectorAll()` method to select HTML elements. While not explicitly mentioned in the provided code, this is an example of using an existing library for DOM manipulation.

**Special JavaScript Features/Syntax**

There are no special JavaScript features or syntaxes used in these test cases.

**Alternatives**

If you're looking for alternative approaches to convert an HTML list to an array:

*   **`NodeList.prototype.item()`**: An older method that allows iterating over a `NodeList` object.
*   **`Array.from(NodeList)`**: A polyfill or native implementation of `Array.from()` for older browsers.

Keep in mind that these alternatives might have different performance characteristics and usage patterns compared to `Array.from()` and the spread operator.

Related benchmarks:

Array.from() vs Rest operator ([...]) (version: 0)

Comparing performance of: Array.from() vs Spread [...]

Created: 7 years ago by: Guest

Jump to the latest result

Array.from()

Spread [...]

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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