Benchmark: Array.from vs Spread 100,000

Tests:

Array.from
var fooSet = new Set(); for(var i=0;i<100000;i++) { fooSet.add(i); } var other = Array.from(fooSet);
Spread
var fooSet = new Set(); for(var i=0;i<100000;i++) { fooSet.add(i); } 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 year ago)

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:134.0) Gecko/20100101 Firefox/134.0

Browser/OS: Firefox 134 on Ubuntu

View result in a separate tab

Test name	Executions per second
Array.from	227.6 Ops/sec
Spread	215.8 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark in question compares two methods of converting a `Set` to an `Array` in JavaScript: using `Array.from()` and the spread syntax (`[...]`). Let's dive into the details.

### Options Compared

1. **Array.from()**
   - **Test Case**: 
     ```javascript
     var fooSet = new Set();
     for(var i=0;i<100000;i++) {
       fooSet.add(i);
     }
     var other = Array.from(fooSet);
     ```
   - **Executions Per Second**: 354.32

2. **Spread Syntax (`[...]`)**
   - **Test Case**: 
     ```javascript
     var fooSet = new Set();
     for(var i=0;i<100000;i++) {
       fooSet.add(i);
     }
     var other = [...fooSet];
     ```
   - **Executions Per Second**: 352.64

### Pros and Cons of Each Approach

**1. Array.from()**
   - **Pros**: 
     - Clearly expresses its intent: Converts a given iterable (like `Set`) into an array.
     - Can accept a mapping function as a second argument, which adds flexibility.
   - **Cons**: 
     - Slightly slower in this benchmark, which may be a consideration in performance-critical applications.

**2. Spread Syntax (`[...]`)**
   - **Pros**:
     - More concise and often regarded as more readable for simple use cases, especially when creating arrays from iterables.
     - It has a uniform syntax that can be applied to various data structures (like arrays, objects, etc.).
   - **Cons**:
     - Limited in flexibility as it doesn’t take a mapping function directly.

### Other Considerations

- **Performance Context**: The performance difference between the two methods in this benchmark was minimal. Array.from() had an execution speed of approximately 354.32 executions per second, while the spread syntax achieved around 352.64 executions per second. Since both methods have similar performance, the choice between them may come down to readability or specific requirements of the codebase.
  
- **Use Cases**: The choice between these methods might also depend on the specific use case, such as whether a transformation of items during conversion is required (in which case, `Array.from()` offers a more direct approach with its mapping function).

### Alternatives

1. **For Loop**: 
   - A traditional approach using a for loop to manually push elements to the new array:
     ```javascript
     var other = [];
     fooSet.forEach(function(value) {
       other.push(value);
     });
     ```

2. **Array.prototype.concat**:
   - Not commonly used for this specific case, but you could use `Array.prototype.concat` with the spread operator for arrays of sets or similar iterable structures:
     ```javascript
     var other = [].concat(...fooSet);
     ```

Overall, the distinction between `Array.from()` and spread syntax primarily comes down to personal preference, code style guidelines, and specific functional requirements rather than performance, especially for standard use cases with reasonable datasets like the one tested here.

Related benchmarks:

Array.from vs Spread 100,000 (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):