Benchmark: spread vs array.from

HTML Preparation code:

<script>
    var map = new Map();
    for (var i = 0; i < 640; i++) {
        map.set(640 - i, i);
    }
    var sorter = (a, b) => (a[0] - b[0]);
</script>

Tests:

Array.from * 6
Array.from(map.entries()); Array.from(map.entries()); Array.from(map.entries()); Array.from(map.entries()); Array.from(map.entries()); Array.from(map.entries());
Spread * 6
[...map.entries()]; [...map.entries()]; [...map.entries()]; [...map.entries()]; [...map.entries()]; [...map.entries()];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from * 6
Spread * 6

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 9 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:140.0) Gecko/20100101 Firefox/140.0

Browser/OS: Firefox 140 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Array.from * 6	21341.2 Ops/sec
Spread * 6	21800.1 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark being tested compares two different approaches to converting a `Map` object into an array of its entries in JavaScript. Specifically, it evaluates the performance of using the `Array.from()` method versus the spread syntax (`[...]`).

### Options Compared

1. **Array.from() Method**: 
   - The benchmark runs `Array.from(map.entries())` multiple times (6 executions in total). 
   - `Array.from()` allows you to create a new array from an array-like structure or iterable objects like the entries of a `Map`.

2. **Spread Syntax**: 
   - In this approach, the benchmark runs the spread syntax `[...map.entries()]` multiple times (also 6 executions). 
   - The spread syntax is a feature that allows iterable objects such as arrays or Maps to be expanded into individual elements within an array literal.

### Pros and Cons

**Array.from()**
- **Pros**:
  - Clear semantics, explicitly indicating that a new array is being formed from an iterable.
  - Can take a second argument—a mapping function—allowing for transformation of entries as they are turned into an array.
  
- **Cons**:
  - Slightly more verbose compared to spread syntax.
  - May have a small performance overhead due to the additional function call.

**Spread Syntax (`[...]`)**
- **Pros**:
  - More concise and often seen as more elegant, making code cleaner and easier to read.
  - Directly spreads elements of the iterable into an array.

- **Cons**:
  - Less versatile when transformation is needed since it does not support direct mapping functions.
  - The performance may vary depending on JavaScript engine optimizations.

### Benchmark Results

From the benchmark results, we see the following executions per second:
- **Array.from()**: 14,393.50 executions/second
- **Spread Syntax**: 11,586.21 executions/second

This indicates that in the tested environment, the `Array.from()` method performed better than the spread syntax in this specific benchmark scenario.

### Other Considerations

1. **JavaScript Engine Variability**: Performance may vary between different JavaScript engines (e.g., V8 in Chrome, SpiderMonkey in Firefox). The benchmark results provided are specific to Chrome 133 running on Mac OS X 10.15.7.

2. **Context of Use**: The choice of which method to use may depend on the larger context of your code. If transformations are needed during the conversion from a `Map`, `Array.from()` could be more beneficial.

3. **Readability vs. Performance**: Sometimes, developers may prioritize code readability over marginal performance gains. Depending on the complexity of the application, the trade-off between readability and performance could influence the method choice.

### Alternatives

- **Manual Looping**: A traditional approach would involve manually iterating over the `Map` entries using a `forEach` or `for...of` loop and pushing the entries into a new array. This might provide control over the process but at the cost of verbosity and potential performance inefficiencies.
  
- **Using Libraries**: There are helper libraries (e.g., Lodash) that can simplify data manipulation, but this often adds overhead (both in terms of library size and performance) compared to using native JavaScript features directly.

Overall, when considering these approaches, engineers should factor in the specific use case, the need for optimization, and the trade-offs between performance and code maintainability.

Related benchmarks:

spread vs array.from (version: 1)

Comparing performance of: Array.from * 6 vs Spread * 6

Created: one year ago by: Guest

Jump to the latest result

Array.from * 6

Spread * 6

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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