Benchmark: Array.from vs Spread 101010101

Tests:

Array.from
var fooSet = new Set(); for(var i=0;i<1000000;i++) { fooSet.add(i); } var other = Array.from(fooSet);
Spread
var fooSet = new Set(); for(var i=0;i<1000000;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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Windows

View result in a separate tab

Test name	Executions per second
Array.from	15.6 Ops/sec
Spread	14.9 Ops/sec

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

LLMs can make mistakes. Check important info.

### Benchmark Overview
The benchmark titled **"Array.from vs Spread 101010101"** compares two JavaScript methods for converting a `Set` (a collection of unique values) into an array: `Array.from()` and the spread operator (`[...]`).

### Tested Options
1. **Array.from()**
   - **Test Code**: 
     ```javascript
     var fooSet = new Set();
     for(var i=0;i<1000000;i++) {
       fooSet.add(i);
     }
     var other = Array.from(fooSet);
     ```
   - **Execution Result**: 15.564 executions per second.

2. **Spread Operator (`[...]`)**
   - **Test Code**:
     ```javascript
     var fooSet = new Set();
     for(var i=0;i<1000000;i++) {
       fooSet.add(i);
     }
     var other = [...fooSet];
     ```
   - **Execution Result**: 14.866 executions per second.

### Pros and Cons of Each Approach
- **Array.from()**
  - **Pros**:
    - Clear and explicit intention to create a new array from an iterable.
    - It allows for additional transformation through a mapping function.
    - Explicit in its argument structure which can be beneficial for readability.
  - **Cons**:
    - Slightly slower in this benchmark compared to the spread operator.
  
- **Spread Operator (`[...]`)**
  - **Pros**:
    - Often preferred for its syntactic brevity and simplicity.
    - Offers almost the same performance for common cases as shown in this benchmark.
  - **Cons**:
    - Does not have a built-in way to apply a transformation to the items in the iterable.
  
### Other Considerations
- **Performance Insights**: Although `Array.from()` was slightly faster in this benchmark, performance can vary depending on the specific use case and the environment (e.g., different browsers and JavaScript engines). 
- **Readability**: While performance is important, code readability and maintainability should also be considered. Depending on the team's coding standards, one method may be preferred over the other due to clarity.
- **Browser Compatibility**: Both `Array.from()` and the spread operator are widely supported in modern browsers, but considering older environments may affect choice if compatibility is a concern.

### Alternatives
- **Using a Loop**: One could manually create the array using a traditional loop:
  ```javascript
  var arr = [];
  for (let item of fooSet) {
    arr.push(item);
  }
  ```
  This approach is generally less elegant and more verbose, but it gives complete control over the way items are added.

- **Other Methods**: In addition to these two methods, other Array methods or libraries (like Lodash) can also facilitate similar operations, but they may introduce dependencies and overhead that are unnecessary for simple tasks.

### Conclusion
The benchmark effectively evaluates the performance of two widely used methods for transforming a `Set` into an array. Each method has its pros and cons, and the choice between them may depend on specific use cases, performance considerations, and team coding standards.

Related benchmarks:

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