Benchmark: Array.from vs Spread vs Concat vs Slice vs Map

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();
Map
var other = fooSet.map(x => x);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
Spread
Concat
Slice
Map

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 years ago)

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

Browser/OS: Chrome 81 on Windows

View result in a separate tab

Test name	Executions per second
Array.from	625523.4 Ops/sec
Spread	827574.2 Ops/sec
Concat	574505.3 Ops/sec
Slice	843341.8 Ops/sec
Map	124896.8 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided JSON represents a JavaScript microbenchmarking test case on the MeasureThat.net website. The benchmark compares the performance of different methods to create a new array from an existing one:

1. `Array.from()`
2. Spread operator (`...`)
3. `concat()`
4. `slice()`
5. `map()` with arrow function syntax

Let's break down each method and their pros and cons:

**1. Array.from()**

`Array.from()` is a modern JavaScript method introduced in ECMAScript 2015 (ES6). It creates a new array from an iterable (e.g., an array, set, or string) by calling the `Iterator` protocol.

Pros:

* Efficient for large datasets
* Can handle various iterables
* Returns a new array

Cons:

* May incur additional overhead due to the creation of an iterator object
* Not supported in older browsers

**2. Spread operator (`...`)**

The spread operator is also introduced in ES6 and allows you to create a new array by spreading elements from an iterable.

Pros:

* Simple syntax
* Fast execution
* Works with arrays, sets, and strings

Cons:

* May not be as efficient for very large datasets
* Can lead to shallow copying of objects if used with complex iterables

**3. concat()**

`concat()` is a legacy method that creates a new array by concatenating multiple elements.

Pros:

* Simple syntax
* Fast execution
* Works across older browsers

Cons:

* Inefficient for large datasets
* Creates multiple intermediate arrays, leading to memory allocation and deallocation overhead

**4. slice()**

`slice()` is another legacy method that creates a new array by extracting a subset of elements from an existing array.

Pros:

* Fast execution
* Works across older browsers

Cons:

* Inefficient for large datasets
* Creates multiple intermediate arrays, leading to memory allocation and deallocation overhead

**5. map() with arrow function syntax**

`map()` is a functional programming method that applies a transformation to each element of an array.

Pros:

* Efficient for large datasets
* Can handle complex transformations
* Works in modern browsers

Cons:

* May incur additional overhead due to the creation of an iterator object
* Requires arrow function syntax (introduced in ES6)

In the provided benchmark result, we can see that Chrome 81 is consistently faster than other methods for creating arrays. This suggests that `Array.from()` and spread operator are more efficient than older legacy methods like `concat` and `slice`.

The `map()` method with arrow function syntax performs well but not as consistently as `Array.from()`. This may be due to the additional overhead of the iterator object.

Other considerations:

* The benchmark uses a large dataset (1000 elements) to measure performance, which helps to minimize the impact of warm-up effects.
* MeasureThat.net provides a raw UA string and browser information, allowing users to reproduce results in their own environment.
* Using modern JavaScript methods like `Array.from()` and spread operator can lead to better code readability and maintainability.

Alternatives:

* If you need to support older browsers, consider using `concat` or `slice`, but be aware of the potential performance overhead.
* For large datasets, `map()` with arrow function syntax can provide good performance, but be mindful of the iterator object overhead.
* Consider using a library like Lodash for array-related methods, which provides more efficient and consistent implementations.

By understanding these trade-offs, you can make informed decisions about which method to use depending on your specific requirements and constraints.

Related benchmarks:

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

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

Created: 4 years ago by: Guest

Jump to the latest result

Array.from

Spread

Concat

Slice

Map

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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