Benchmark: Array.from vs Spread v2

Script Preparation code:

var fooSet = new Set();
for (var i = 0; i < 1000; 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: one month ago)

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

Browser/OS: Firefox 151 on Windows

View result in a separate tab

Test name	Executions per second
Array.from	79548.5 Ops/sec
Spread	65556.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark tests two different approaches for converting a `Set` to an `Array` in JavaScript: using the `Array.from` method and the spread operator (`...`). Let's break down the core aspects of this benchmark, including the options being compared, their pros and cons, and additional considerations.

### Options Compared

1. **Array.from**
   - **Benchmark Definition**: `var other = Array.from(fooSet);`
   - **Test Name**: "Array.from"

2. **Spread Operator**
   - **Benchmark Definition**: `var other = [...fooSet];`
   - **Test Name**: "Spread"

### Pros and Cons

#### Array.from
- **Pros**:
  - **Clarity**: It makes clear that you are converting an iterable (like a `Set`) to an array.
  - **Additional Options**: `Array.from` can accept a mapping function as a second argument, which can be useful for transforming the elements during the conversion.

- **Cons**:
  - **Performance**: As seen in the benchmark results, it tends to be slightly slower than the spread operator in this particular test case (1151020.875 executions per second compared to 1210139.25 for Spread).
  
#### Spread Operator
- **Pros**:
  - **Conciseness**: The syntax is shorter and simpler, which can make the code easier to read and write.
  - **Performance**: In this benchmark, it demonstrated better execution speed when converting the `Set` to an `Array`.

- **Cons**:
  - **Limited Functionality**: Unlike `Array.from`, it does not support a mapping function, meaning that direct transformations during conversion aren't possible.

### Other Considerations
- **Choosing Between Options**: The choice between `Array.from` and the spread operator can depend on both performance and the specific requirements of the task. For simple conversions, the spread operator might be sufficient and more performant, while for larger transformations or more complex conversions, `Array.from` may be the better choice.
- **Browser Compatibility**: Both methods are widely supported in modern browsers, but `Array.from` was introduced in ES6 (ECMAScript 2015), so for very old browsers, polyfills may be necessary.
- **Readability and Maintainability**: In teams and projects, code readability is often as important as performance. Some developers may prefer `Array.from` for its explicitness, particularly if someone else will later maintain the code.

### Alternatives
Other methods for converting a `Set` to an `Array` include:

- **Using a `for` Loop**:
  ```javascript
  let arr = [];
  for (let item of fooSet) {
      arr.push(item);
  }
  ```
  - This is a straightforward approach but more verbose and likely less performant than modern methods.

- **Using `map` with an Array**: First converting the `Set` to an array using `Array.from`, then using `.map()` if transformations are needed:
  ```javascript
  let transformedArray = Array.from(fooSet, item => item * 2);
  ```
- **Using `reduce`**: You can convert a `Set` into an array using the `reduce` function:
  ```javascript
  let arr = [...fooSet].reduce((acc, item) => {
      acc.push(item);
      return acc;
  }, []);
  ```

Ultimately, selecting between these options should involve considering performance, readability, and the specific needs of the task at hand. The benchmark provides valuable insights into performance but should be complemented with qualitative factors when making a decision.

Related benchmarks:

Array.from vs Spread v2 (version: 1)

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