Benchmark: Array(1,000,000 length) Convert | Array.from vs Spread

Script Preparation code:

const largeArray = [];
for (let i = 0; i < 1_000_000; i++) {
  largeArray.push(i);
}

Tests:

Array.from
const arr1 = Array.from(largeArray);
Spread
const arr2 = [...largeArray];

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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.from	4279.3 Ops/sec
Spread	4287.9 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON compares two different methods of converting a large array into a new one in JavaScript: using `Array.from()` and the spread operator (`...`).

### Benchmark Components

1. **Benchmark Name and Preparation**:
   - **Name**: "Array(1,000,000 length) Convert | Array.from vs Spread"
   - **Preparation Code**: A large array of length 1,000,000 is created using `Array.from()`, which constructs an array from an iterable. The function creates an array containing numbers from 0 to 999,999.

### Individual Test Cases

1. **`Array.from()`**:
   - **Benchmark Definition**: `const arr1 = Array.from(largeArray);`
   - This method creates a new array instance from an array-like or iterable object. In this case, it takes the `largeArray` and constructs a new array from its elements.

2. **Spread Operator `[...]`**:
   - **Benchmark Definition**: `const arr2 = [...largeArray];`
   - The spread operator expands the elements of the `largeArray` into a new array. It effectively “spreads” the items of the original array into the new array.

### Benchmark Results

In terms of performance:
- The spread operator (`...`) had a higher performance with **1,301.63 executions per second**.
- The `Array.from()` method had a significantly lower performance with only **247.89 executions per second**.

### Pros and Cons of Each Approach

1. **Array.from()**:
   - **Pros**:
     - It can take a mapping function as a second argument, allowing you to transform elements while creating the new array.
     - Supports array-like objects or iterables directly.
   - **Cons**:
     - Slower performance as observed in the benchmark.
     - May have a larger overhead due to the additional capabilities it offers.

2. **Spread Operator `[...]`**:
   - **Pros**:
     - Generally performs better in this benchmark context.
     - More concise and readable syntax for copying arrays.
     - Useful in various contexts beyond copying (e.g., combining arrays, spreading elements into function calls).
   - **Cons**:
     - Cannot transform elements while copying; it strictly copies the values.
     - May not handle non-iterables directly.

### Conclusion on Alternatives

In addition to these two methods, there are alternative approaches to copying arrays in JavaScript, including:
- **`Array.prototype.slice()`**: `const arr2 = largeArray.slice();` - A versatile way to create a shallow copy of the array.
- **`Array.prototype.concat()`**: `const arr2 = [].concat(largeArray);` - Also creates a new array by concatenating another array.

When deciding between these options, developers should consider performance implications, the need for transformation of elements, and code clarity for their specific use cases.

Related benchmarks:

Array(1,000,000 length) Convert | Array.from vs Spread (version: 2)

Comparing performance of: Array.from vs Spread

Created: one year ago by: Registered User

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