Benchmark: Set(1,000,000 length) Convert | Array.from vs Spread

Script Preparation code:

const largeSet = new Set();
for (let i = 0; i < 1_000_000; i++) {
  largeSet.add(i);
}

Tests:

Array.from
const arrFromSet = Array.from(largeSet);
Spread
const arrSpreadSet = [...largeSet];

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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.1 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.from	144.5 Ops/sec
Spread	139.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided JSON represents a benchmark test that compares the performance of two different methods for converting a large `Set` to an `Array` in JavaScript. This particular benchmark focuses on the comparison between using the `Array.from` method and the spread syntax (`...`) for this conversion.

### Benchmark Overview

- **Benchmark Name**: Set(1,000,000 length) Convert | Array.from vs Spread
- **Preparation Code**: A large `Set` containing 1,000,000 elements is created, which serves as the input for the test cases.
  
### Test Cases

1. **Array.from**:
   - **Benchmark Definition**: `const arrFromSet = Array.from(largeSet);`
   - **Test Name**: "Array.from"
   - **Description**: This method creates a new `Array` instance from an iterable object (in this case, the `Set`). It iterates over the elements of the `Set` and adds them to the new array.

2. **Spread Syntax**:
   - **Benchmark Definition**: `const arrSpreadSet = [...largeSet];`
   - **Test Name**: "Spread"
   - **Description**: The spread syntax allows an iterable (like a `Set` or an `Array`) to be expanded in places where zero or more arguments are expected. In this case, it takes all the elements of the `Set` and spreads them into a new array.

### Performance Results

- **Results Summary**:
  - **Array.from**: 148.31 executions per second
  - **Spread**: 138.78 executions per second

From the results, it's evident that the `Array.from` method outperformed the spread syntax for this particular benchmark on the tested environment (Safari 18 on Mac OS).

### Pros and Cons

#### Array.from
- **Pros**:
  - Slightly better performance in converting a large `Set` to an `Array` based on benchmark results.
  - Can take a second argument, a mapping function, which allows transforming elements as they are added to the new array.
  
- **Cons**:
  - Slightly less intuitive than spread syntax for those unfamiliar with it.
  
#### Spread Syntax
- **Pros**:
  - More concise and often seen as more readable.
  - Can be used in a variety of contexts such as function arguments, array literals, and more.
  
- **Cons**:
  - May incur a slightly lower performance overhead, as shown in the benchmark results.
  - Doesn't allow for transformation of elements during the conversion process without additional steps.

### Other Considerations

- **Browser and Environment Variability**: Performance can vary across different browsers and devices. Testing in multiple environments is recommended to ensure consistency in results.
  
- **Memory Usage**: Performance isn't only about execution speed but also memory consumption. The spread operator might use more stack space depending on the browser's implementation.

### Alternatives

1. **forEach Loop**: Another way to convert a `Set` to an `Array` is by using a `forEach` loop and pushing elements manually into an array.
   ```javascript
   const arrManual = [];
   largeSet.forEach(value => arrManual.push(value));
   ```
   - **Pros**: Clear intention and allows for custom processing of elements.
   - **Cons**: Generally slower than both `Array.from` and spread syntax.

2. **Map Method**: Using the `map` method after converting to an array using `Array.from` or spread syntax can allow for transformation.
   ```javascript
   const transformedArray = Array.from(largeSet).map(value => value * 2);
   ```

3. **Using Libraries**: Libraries like Lodash have utilities for working with collections and may provide various methods that abstract these operations.
   - **Pros**: Can simplify complex tasks.
   - **Cons**: Adds an additional dependency and may not be as performant for simple cases.

In summary, this benchmark serves as a practical exploration of how two common JavaScript methods can differ in performance for a specific data structure conversion task, providing insights that can inform development practices depending on performance needs.

Related benchmarks:

Set(1,000,000 length) Convert | Array.from vs Spread (version: 2)

Comparing performance of: Array.from vs Spread

Created: one month ago by: Registered User

Jump to the latest result

Array.from

Spread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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