Benchmark: Array.from vs Spread on arrays (short array)

Script Preparation code:

var arr = [];
for(var i=0;i<10;i++) {
  arr.push(i);
}

Tests:

Array.from
var other = Array.from(arr);
Spread
var other = [...arr];

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Browser/OS: Chrome 137 on Windows

View result in a separate tab

Test name	Executions per second
Array.from	62164520.0 Ops/sec
Spread	69679192.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark described in the provided JSON tests and compares two different methods for creating a new array from an existing array in JavaScript: `Array.from` and the spread operator (`[...]`).

### Benchmark Overview

1. **Name**: Array.from vs Spread on arrays (short array)
2. **Script Preparation Code**: The benchmark initializes an array called `arr`, populating it with numbers 0 through 9 (a short array of length 10).
3. **Test Cases**: 
   - `Array.from(arr)`: This method creates a new array instance from an array-like or iterable object, which in this case is the previously created `arr`.
   - `[...arr]`: This syntax, known as the spread operator, takes the iterable `arr` and expands it into a new array.

### Results Summary
The benchmark execution results indicate the number of operations performed per second for each method:
- **Spread Operator (`[...]`)**: 69,679,192 executions per second
- **Array.from**: 62,164,520 executions per second

### Comparison of Options

#### **Array.from**
- **Pros**:
  - It can accept a second argument, which is a mapping function, allowing for additional processing during the conversion.
  - More explicit in its intention to convert array-like objects into arrays, making the code more readable.
  
- **Cons**:
  - Slightly slower in this benchmark when compared to the spread operator.

#### **Spread Operator (`[...]`)**
- **Pros**:
  - Generally faster as indicated by the benchmark results.
  - More concise and often preferred for readability and simplicity in modern JavaScript.
  - Can be used in various contexts (e.g., function arguments, array literals).

- **Cons**:
  - Limited to spreading iterable data types into array elements, meaning it is less versatile than `Array.from` which can also list mapping during conversion.
  
### Considerations
- **Performance**: When performance is critical, the spread operator might be the better choice, as demonstrated by the benchmark results showing it outperforms `Array.from`.
- **Readability**: The choice may also depend on the context of use; `Array.from` is more explicit, while the spread operator can be cleaner in cases where brevity is beneficial.
- **Browser Support**: Both methods are well-supported in modern browsers, but checking compatibility for older environments is always a good practice.

### Alternatives
- **Using a `for` loop**: One traditional way to create a new array is by using a regular `for` loop to iterate through the original array and push elements into a new array. This method offers maximum control but is usually more verbose and error-prone compared to the approaches tested.
  
- **`Array.prototype.concat()`**: If you’re only interested in combining arrays, `concat` can also create a new array but is not applicable here, since you’re not combining arrays.

In conclusion, both `Array.from` and the spread operator are effective methods of creating a new array from an existing iterable. The choice between them should depend on factors such as performance requirements, code readability, and specific use cases. The benchmark clearly advocates the spread operator for the given circumstances, especially with short arrays.

Related benchmarks:

Array.from vs Spread on arrays (short array) (version: 1)

Comparing performance of: Array.from vs Spread

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