Benchmark: JS Array.from vs Spread [...]

Script Preparation code:

var fooSet = new Set();
for(var i=0;i<10000;i++) {
  fooSet.add(i);
}

Tests:

Array.from
return Array.from(fooSet);
Spread
return [...fooSet];

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/128.0.0.0 Safari/537.36 Edg/128.0.0.0

Browser/OS: Chrome 128 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.from	51756.9 Ops/sec
Spread	52425.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases to understand what's being tested.

**Benchmark Definition**

The benchmark is testing two approaches for creating an array from a Set object in JavaScript:

1. `Array.from(fooSet)`
2. `[...fooSet]` (also known as the spread operator)

**Script Preparation Code**

The script preparation code creates a new Set object called `fooSet` and populates it with 10,000 unique values using a `for` loop.

```javascript
var fooSet = new Set();
for (var i = 0; i < 10000; i++) {
  fooSet.add(i);
}
```

This script preparation code ensures that the set contains a large number of elements to test the performance of both approaches.

**Options Compared**

The two options being compared are:

1. `Array.from(fooSet)`: This method creates a new array by converting the Set object into an array.
2. `[...fooSet]`: This is the spread operator, which creates a new array by spreading the elements of the Set object.

**Pros and Cons**

Here's a brief overview of the pros and cons of each approach:

1. `Array.from(fooSet)`;
	* Pros:
		+ More explicit and readable
		+ May be faster due to optimized internal implementation
	* Cons:
		+ May require more CPU cycles to create an array
2. `[...fooSet]` (spread operator);
	* Pros:
		+ More concise and expressive
	* Cons:
		+ May be slower due to additional overhead for spreading elements

**Library**

None of the provided code uses a library, but it's worth noting that `Array.from()` was introduced in ECMAScript 2015 (ES6), which is supported by most modern browsers.

**Special JS Feature or Syntax**

The spread operator (`[...fooSet]`) is a relatively new feature introduced in ECMAScript 2015. It allows for the creation of arrays from iterable objects, such as Sets, using the syntax ` [...iterable]`.

**Benchmark Preparation Code and Test Cases**

The benchmark preparation code creates a Set object with 10,000 unique values, and the test cases create two functions that return an array from this set using either the `Array.from()` method or the spread operator.

The latest benchmark result shows that Chrome 106 on Windows Desktop executed the `Array.from(fooSet)` function approximately 2.3 times faster than the `[...fooSet]` function, with execution rates of around 35902 executions per second vs. 19693 executions per second.

**Other Alternatives**

If you're interested in exploring alternative approaches or optimizing your own benchmarking tests, here are a few options:

* Using `Array.from()` and then calling `map()` on the resulting array
* Using `Array.from()` with an initial value (e.g., `[...fooSet].fill(0)` to create an array of zeros)
* Using other library functions or polyfills for array creation, such as Lodash's `_.from` function

Keep in mind that these alternatives may not be relevant to the specific benchmark being tested and should be considered only if you're interested in exploring alternative approaches.

Related benchmarks:

JS Array.from vs Spread [...] (version: 0)

Comparing performance of: Array.from vs Spread

Created: 5 years 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 llama3.2:3b, generated one year ago):