Benchmark: Array.from vs Spread using 1000000 elements / only counts conversion

Script Preparation code:

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

Tests:

Array.from
var other = Array.from(fooSet);
Spread
var other = [...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/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.from	735.3 Ops/sec
Spread	739.8 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the explanation of the provided benchmark and its results.

**Benchmark Definition:**
The benchmark measures the performance difference between two approaches to convert a Set object to an array: `Array.from()` and the spread operator (`...`). The test creates a large Set with 1,000,000 elements, only counting the conversion process, and then converts it to an array using both methods.

**Script Preparation Code:**
The script preparation code creates a new Set called `fooSet` with 1,000,000 elements using a for loop. This sets up the test data.

**Html Preparation Code:**
There is no HTML preparation code provided, which suggests that this benchmark only tests the JavaScript engine's performance and does not involve any external dependencies or DOM interactions.

**Individual Test Cases:**

### Array.from()
The first test case converts the Set `fooSet` to an array using the `Array.from()` method. This method creates a new array from the elements of a given iterable (in this case, the Set).

```javascript
var other = Array.from(fooSet);
```

**Pros:**

* Can be used with any type of iterable, not just Sets.
* More explicit and verbose than the spread operator.

**Cons:**

* May have additional overhead due to the creation of a new array.

### Spread Operator (...)
The second test case converts the Set `fooSet` to an array using the spread operator (`...`). This method creates a new array by spreading the elements of a given iterable (in this case, the Set) into a new array.

```javascript
var other = [...fooSet];
```

**Pros:**

* More concise and efficient than `Array.from()`.
* Can be used with arrays, too!

**Cons:**

* Only works with iterables that support spreading.
* May have different performance characteristics depending on the browser.

**Library/Features:**
There are no external libraries or features used in this benchmark. The only JavaScript feature mentioned is the spread operator (`...`), which was introduced in ECMAScript 2015 (ES6).

**Other Alternatives:**

* `Array.prototype.slice()` and `concat()`: These methods can also be used to convert a Set to an array, but they may have different performance characteristics.
* `Set.prototypeToArray()`: This method is part of the Set API and converts a Set to an array. However, its availability might depend on the browser.

**Benchmark Results:**
The latest benchmark result shows that the spread operator (`...`) performed slightly better than `Array.from()` in this specific test case.

Related benchmarks:

Array.from vs Spread using 1000000 elements / only counts conversion (version: 0)

Comparing performance of: Array.from vs Spread

Created: one year 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):