Benchmark: Array.from vs Spread vs Concat vs Slice

Script Preparation code:

var fooSet = new Array();
for (var i = 0; i < 1000; i++) {
    fooSet.push(i);
}

Tests:

Array.from
var other = Array.from(fooSet);
Spread
var other = [...fooSet];
Concat
var other = fooSet.concat();
Slice
var other = fooSet.slice();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
Spread
Concat
Slice

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and benchmark code.

**Benchmark Definition**

The website `MeasureThat.net` allows users to create and run JavaScript microbenchmarks. The current benchmark compares four different methods for creating an array from a given array:

1.  **Array.from**: This method creates a new array from an iterable (in this case, the `fooSet` array) by using the `from()` function.
2.  **Spread Operator**: This method uses the spread operator (`...`) to create a copy of the original array.
3.  **Concatenation**: This method concatenates the original array with an empty array (`[]`) to create a new array.
4.  **Slice**: This method creates a shallow copy of the original array by using the `slice()` function.

**Benchmark Preparation Code**

The script preparation code defines an array `fooSet` and populates it with 1000 elements:

```javascript
var fooSet = new Array();
for (var i = 0; i < 1000; i++) {
    fooSet.push(i);
}
```

This array is used as the source for creating new arrays using the different methods being compared.

**Individual Test Cases**

There are four test cases, each defining a specific benchmark:

1.  **Array.from**: Creates a new array from `fooSet` using `Array.from()`.
2.  **Spread**: Creates a copy of `fooSet` using the spread operator (`...`).
3.  **Concat**: Concatenates an empty array with `fooSet` to create a new array.
4.  **Slice**: Creates a shallow copy of `fooSet` using `slice()`.

**Benchmark Results**

The latest benchmark results show that each method has its own performance characteristics:

*   **Array.from**: Performs the worst, likely due to the additional overhead of calling `from()`.
*   **Spread**: Has the best performance, possibly because it's a simple and efficient operation.
*   **Concat**: Performs reasonably well but is slower than the spread operator.
*   **Slice**: Has the second-best performance after the spread operator.

**Pros and Cons**

Here's a summary of the pros and cons for each method:

*   **Array.from**: Pros: Creates a new array from an iterable. Cons: Additional overhead due to `from()` function call, which may not be necessary in this case.
*   **Spread Operator**: Pros: Simple and efficient. Cons: May create unnecessary copies if used with large arrays.
*   **Concatenation**: Pros: Easy to implement. Cons: Creates a new array that includes all elements from the original array, including any null or undefined values.
*   **Slice**: Pros: Efficient for shallow copies. Cons: May not work as expected if you need to modify the resulting array.

**Other Alternatives**

In addition to these four methods, there are other ways to create arrays from an iterable:

*   Using `Array.prototype.forEach()` and pushing elements onto a new array.
*   Using `Array.from()` with a callback function or map method.
*   Using libraries like Lodash's `cloneDeep` function for deep copying.

However, these alternatives might not be as straightforward or efficient as the original four methods being compared.

Related benchmarks:

Array.from vs Spread vs Concat vs Slice (version: 0)

Comparing performance of: Array.from vs Spread vs Concat vs Slice

Created: 6 years ago by: Guest

Jump to the latest result

Array.from

Spread

Concat

Slice

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):