Benchmark: Array.from vs Spread (only)

Script Preparation code:

var fooSet = new Set();
for(var i=0;i<10000;i++) {
  fooSet.add(i);
}

Tests:

Array.from
var other = Array.from(fooSet);
Spread
var other = [...fooSet];

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: 2 years ago)

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

Browser/OS: Chrome 122 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.from	8887.8 Ops/sec
Spread	6264.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into explaining what is tested on the provided JSON and comparing different approaches.

**Benchmark Definition:**

The benchmark measures the performance difference between using `Array.from()` and the spread operator (`...`) to create an array from a set of values. The test case creates a large set of numbers (10,000) and then uses each approach to extract those numbers into a new array.

**Options compared:**

*   **`Array.from(fooSet)`**: This method creates a new array by iterating over the elements of the `fooSet` set.
*   **`[...fooSet]`**: This is an array spread operator that also creates a new array from the elements of the `fooSet` set.

**Pros and Cons:**

Both methods are efficient and have similar performance characteristics, but they differ in how they handle the iteration over the set:

*   **`Array.from(fooSet)`**:
    *   Pros:
        *   More explicit and readable code
        *   May be preferred by developers who value explicitness
    *   Cons:
        *   Requires additional memory allocation for the array
        *   May incur more overhead due to the iteration
*   **`[...fooSet]`**:
    *   Pros:
        *   More concise and expressive code
        *   Often considered more modern and JavaScript-way
    *   Cons:
        *   Less explicit about the intent (i.e., creating an array from a set)
        *   May be less readable for developers unfamiliar with this syntax

**Library usage:**

There is no external library used in this benchmark. The `Set` data structure is a native JavaScript type.

**Special JS feature or syntax:**

The test case uses the spread operator (`...`) which was introduced in ECMAScript 2015 (ES6). This allows for more concise array creation from iterables like sets, arrays, and maps.

**Other alternatives:**

For creating an array from a set of values, other approaches could be:

*   **Using `Array.prototype.forEach()`**: This method iterates over the elements of the set using the provided callback function. However, it's less efficient than both `Array.from()` and spread operator since it involves more overhead.
    ```javascript
var fooSet = new Set();
fooSet.forEach(function (element) {
  array.push(element);
});
```
*   **Using a loop**: This approach is the least efficient as it requires manual iteration over each element of the set.

In conclusion, both `Array.from()` and the spread operator (`[...fooSet]`) are efficient approaches for creating an array from a set. The choice between them often comes down to personal preference and readability considerations.

Related benchmarks:

Array.from vs Spread (only) (version: 0)

Comparing performance of: Array.from vs Spread

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