Benchmark: Array.from vs Spread [...] from already existing array (to avoid deepCopy)

Array.from vs Spread [...] from already existing array (to avoid deepCopy) (version: 1)

Speed test of Array.from against Spread ([...array]) syntax. Not using Set because the test case wanted here is to have 2 arrays with the same elements (in e.g. to avoid mutating the original array).

Comparing performance of: Array.from vs Spread ([...array])

Created: one year ago by: Guest

Jump to the latest result

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

const array1 = [];
for (let i = 0; i < 1000; i++) {
  array1.push(i);
}

Tests:

Array.from
const array2 = Array.from(array1);
Spread ([...array])
const array2 = [...array1];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
Spread ([...array])

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 25 days ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:148.0) Gecko/20100101 Firefox/148.0

Browser/OS: Firefox 148 on Linux

View result in a separate tab

Test name	Executions per second
Array.from	47380.3 Ops/sec
Spread ([...array])	56404.8 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark tests the performance of two different methods for copying an array in JavaScript: `Array.from` and the spread syntax ([...array]). The context of the test is that it specifically aims to evaluate the efficiency of these methods when duplicating arrays without creating deep copies, thus ensuring that the original array remains unchanged.

### Options Compared

1. **Array.from**
    - **Benchmark Definition**: `const array2 = Array.from(array1);`
    - **Test Name**: "Array.from"
    - **Purpose**: This method creates a new array instance from an array-like or iterable object. In this case, it takes `array1` as input to create a new copy of it.

2. **Spread Syntax**
    - **Benchmark Definition**: `const array2 = [...array1];`
    - **Test Name**: "Spread ([...array])"
    - **Purpose**: The spread syntax is a shorthand used to expand iterable objects into a list. In this benchmark, it takes `array1` and creates a new array by spreading its elements into a new array instance.

### Pros and Cons of Each Approach

#### Array.from
- **Pros**:
  - Clear intent: Using `Array.from` clearly indicates the intention to create a new array from an iterable.
  - Additional functionality: It can take a mapping function as a second argument, allowing for transformation during the copy process.
  
- **Cons**:
  - Slightly less performant than the spread syntax in certain environments (as indicated in this benchmark).
  - More verbose compared to the spread operator.

#### Spread Syntax
- **Pros**:
  - Concise and readable: It provides a clearer and simpler syntax for creating a new array.
  - More versatile: Can be used in many contexts beyond just array copying, such as function argument spreading and merging objects.

- **Cons**:
  - Less explicit about its purpose compared to `Array.from`, which may affect readability in complex use cases.
  - Does not support a transformation function directly during the array creation.

### Other Considerations

When testing these two methods, it is important to take into account the execution environment. The benchmark results indicate execution speeds measured in "ExecutionsPerSecond", with `Array.from` performing better (81,553) compared to the spread syntax (67,810). This can vary based on the JavaScript engine optimizations, and different browsers might yield different performance metrics.

### Alternatives to Consider

- **Using a Loop**: A traditional for-loop can also be employed to copy arrays. For example:
  ```javascript
  const array2 = [];
  for (let i = 0; i < array1.length; i++) {
      array2[i] = array1[i];
  }
  ```
  - This approach is more verbose and might be less efficient compared to the modern methods tested here, but it can be useful in certain contexts.

- **Array.prototype.slice()**: 
  ```javascript
  const array2 = array1.slice();
  ```
  - This method creates a shallow copy of a portion of an array and, when called without parameters, it copies the entire array. It’s also concise and has been widely used in earlier JavaScript development.

### Conclusion

The benchmark provides insightful performance data on two common array copying methods in JavaScript. Developers should choose the appropriate method based on context, taking into account the simplicity of syntax, performance, and any additional functional requirements that may arise in their specific coding scenarios.

Related benchmarks: