Benchmark: Array.from vs Spread list

Tests:

Array.from
var fooSet = []; for(var i=0;i<100;i++) { fooSet.push(i); } var other = Array.from(fooSet);
Spread
var fooSet = []; for(var i=0;i<100;i++) { fooSet.push(i); } var other = fooSet.splice();

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36

Browser/OS: Chrome 140 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.from	5948208.5 Ops/sec
Spread	6336877.5 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 7 months ago):

LLMs can make mistakes. Check important info.

The benchmark described tests the performance of two different methods for creating an array from an iterable (in this case, an array-like object) in JavaScript: `Array.from` and the spread operator (`...`), implemented via the `splice` method in this context.

### Test Options Overview

1. **Array.from**
   - **Syntax**: `var other = Array.from(fooSet);`
   - **Description**: `Array.from` is a built-in JavaScript method available since ECMAScript 2015 (ES6). It converts various types of iterable or array-like objects (like NodeList, arguments object) into an array.
   - **Pros**:
     - It can take a second optional argument, a mapping function, which can transform elements as they are added to the array.
     - It is clear and expressive, indicating that an array is being created from an iterable.
   - **Cons**:
     - It could be slightly slower than some alternatives, depending on the implementation.

2. **Spread Operator (`...`) via Splice**
   - **Syntax**: `var other = fooSet.splice();`
   - **Description**: The example here is not directly using the spread operator; instead, it demonstrates a different method of copying an array. `splice` is typically used to remove elements from an array but without parameters, it can return the elements of the array itself.
   - **Pros**:
     - If done correctly (like using `...fooSet`), it’s a succinct way to create a shallow copy of an array, which can lead to clearer code.
   - **Cons**:
     - When using `splice()` without parameters, it transforms the original array by emptying it, which might not be the desired behavior and can lead to bugs.
     - The analogy of utilizing `splice()` here can be confusing, as it is not the intended use case of the method (compared to how `Array.from` is utilized).
     - It does not provide the mapping ability that `Array.from` offers.
  
### Benchmark Considerations

Looking at the provided latest benchmark results, we see the performance comparisons of the two methods on a specific platform (Chrome 140 on Mac OS X 10.15.7):

- **Spread** method: **6,336,877.5** executions per second.
- **Array.from** method: **5,948,208.5** executions per second.

### Performance Insights

- The `Spread` copy method (`splice()`, albeit misapplied here) outperformed `Array.from` in this benchmark.
- It's essential to note that results may vary based on the JavaScript engine's optimization, the size of data being processed, and hardware differences.
  
### Alternatives

Other alternatives for creating arrays from iterable sources in JavaScript that weren't directly tested in this benchmark include:

- **Using `for...of` loop**: You could manually populate a new array with a loop.
    ```javascript
    let other = [];
    for (let value of fooSet) {
        other.push(value);
    }
    ```

- **Using `map` with `Array.from`**: If you want to transform elements while copying.
    ```javascript
    var other = Array.from(fooSet, x => x * 2);
    ```

- **Using `concat`**: If `fooSet` is an array, you can also replicate its content via `concat`.
    ```javascript
    var other = [].concat(fooSet);
    ```

### Conclusion

When choosing between these methods, considerations should include clarity, performance needs, and the specific requirements of your use case (e.g., whether you need to transform or simply copy the values). While benchmarks provide useful data, the right choice may often depend on the context of the code and the expected performance in a real-world scenario.

Related benchmarks:

Array.from vs Spread list (version: 1)

Comparing performance of: Array.from vs Spread

Created: 7 months 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 7 months ago):