Benchmark: Array.from vs Spread performance x 1000

Tests:

Array.from
const fooSet = new Set([1,2,3,4,5,6,7,8,9,0]); for(let i=0;i<1000;i++) { Array.from(fooSet); }
Spread
const fooSet = new Set([1,2,3,4,5,6,7,8,9,0]); for(let i=0;i<1000;i++) { [...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: 9 months ago)

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

Browser/OS: Firefox 141 on Windows

View result in a separate tab

Test name	Executions per second
Array.from	12555.4 Ops/sec
Spread	10654.6 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

In this benchmark, two different approaches for converting a `Set` to an `Array` in JavaScript are compared: using `Array.from()` and the spread syntax (`[...]`). The benchmark involves running each method 1000 times to measure their performance in terms of execution speed.

### Options Compared:

1. **Array.from()**
   - **Test Case Definition**:
     ```javascript
     const fooSet = new Set([1,2,3,4,5,6,7,8,9,0]);
     for(let i=0;i<1000;i++) {
       Array.from(fooSet);
     }
     ```
   - **Description**: `Array.from()` is a method built into the Array prototype that creates a new Array instance from an array-like or iterable object. In this case, it converts a `Set` (which is iterable) into an array.

2. **Spread Syntax (`[...]`)**
   - **Test Case Definition**:
     ```javascript
     const fooSet = new Set([1,2,3,4,5,6,7,8,9,0]);
     for(let i=0;i<1000;i++) {
       [...fooSet];
     }
     ```
   - **Description**: The spread syntax (`...`) is a syntactic feature that allows an iterable (like an array or a set) to be expanded into individual elements. Here, it spreads the elements of the `Set` into a new array.

### Pros/Cons of Each Approach:

1. **Array.from()**:
   - **Pros**:
     - More explicit about its intent as it directly conveys that an array is being created from an iterable.
     - Can accept a mapping function (optional) as the second argument, providing additional flexibility.
   - **Cons**:
     - Slightly more overhead in terms of function call (although often negligible in performance).

2. **Spread Syntax**:
   - **Pros**:
     - More concise and often considered more readable due to its simplicity.
     - Generally performs faster in most modern JavaScript engines, as evidenced by the benchmark results.
   - **Cons**:
     - Slightly less clear for beginners since the syntax is more abstract than the method call in `Array.from()`.

### Benchmark Results:
- The benchmark results show that the spread syntax has a higher performance, with `ExecutionsPerSecond` indicating:
  - **Spread**: Approximately 42831 executions/second
  - **Array.from**: Approximately 36311 executions/second

### Other Considerations:
- The choice between using `Array.from()` and the spread syntax may depend on the specific context and code maintainability goals. For instance, while the spread syntax performs better, using `Array.from()` is helpful in cases where a mapping function is necessary for transforming elements during the conversion.
- It's also worth noting that performance can vary depending on the JavaScript engine and the environment (browser or Node.js). Therefore, developers should test both approaches in their specific context if performance is a critical factor.

### Alternatives:
Aside from `Array.from()` and the spread syntax, other methods to convert a `Set` to an `Array` include:
- **Using the `Array` constructor**:
  ```javascript
  const arr = Array.from(fooSet);
  // or
  const arr = new Array(...fooSet);
  ```
- **Using a loop**:
  ```javascript
  const arr = [];
  fooSet.forEach(value => arr.push(value));
  ```
This approach may be less efficient but can be appropriate in certain situations where one needs to perform additional operations during conversion.

In conclusion, while both methods are effective for converting a `Set` to an `Array`, the spread syntax tends to be faster in this benchmark scenario, and its concise syntax can improve readability. Ultimately, the best choice should be guided by specific use cases, performance needs, and team coding standards.

Related benchmarks:

Array.from vs Spread performance x 1000 (version: 1)

x1000 runs

Comparing performance of: Array.from vs Spread

Created: one year 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 gpt-4o-mini, generated one year ago):