Benchmark: Set: Array.from vs Spread

Script Preparation code:

var setObj = new Set;
for (let i = 0; i < 100; ++i) {
	setObj.add(i);
}
var res = [];

Tests:

Array.from
res = Array.from(setObj);
Spread
res = [...setObj];

Historical Performance Data aggregated from 36 community runs

Desktop Results:

Chrome 26 runs

Array.from

4.6M/s

Spread

4.6M/s

View exact numbers

✓ Array.from: 4,649,900 ops/sec
• Spread: 4,647,660 ops/sec

Firefox 10 runs

Spread

910K/s

Array.from

903K/s

View exact numbers

✓ Spread: 909,955 ops/sec
• Array.from: 902,622 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: yesterday)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/151.0.0.0 Safari/537.36

Browser/OS: Chrome 151 on Mac OS X 10.15.7

View result in a separate tab

Spread

8.7M/s

Array.from

8.6M/s

View exact numbers

Test name	Executions per second
✓ Spread	8,687,636 Ops/sec
Array.from	8,609,344 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 JavaScript microbenchmark provided by MeasureThat.net.

**What is tested?**

The benchmark tests two approaches for creating an array from a Set object:

1. `Array.from(setObj)`
2. ` [...setObj]` (the spread operator)

A Set object, created using `var setObj = new Set()`, contains 100 unique integers between 0 and 99. The script then adds each of these numbers to the Set.

**Options compared**

The two approaches being tested are:

1. **Array.from(setObj)**: This method creates a new array from the elements of the Set object.
2. **Spread operator ( [...setObj] )**: This syntax creates a new array by spreading the elements of the Set object.

**Pros and Cons**

1. **Array.from(setObj)**
	* Pros:
		+ More explicit and readable code
		+ Can be more performant if you need to access the resulting array by index or use array methods like `map()`, `filter()`, etc.
	* Cons:
		+ May incur additional overhead due to the creation of an intermediate array
2. **Spread operator ( [...setObj] )**
	* Pros:
		+ More concise and expressive code
		+ Creates a new array without creating an intermediate one
	* Cons:
		+ Less readable than `Array.from()`
		+ May be slower due to the creation of multiple, small arrays

**Library**

The Set object is a built-in JavaScript API, introduced in ECMAScript 2015 (ES6). Its purpose is to represent an unordered collection of unique values.

**Special JS feature or syntax**

None mentioned. However, it's worth noting that the spread operator (` [...setObj]`) was also introduced in ES6 as `Destructuring assignment`.

**Benchmark preparation code and test cases**

The script preparation code creates a new Set object with 100 unique integers between 0 and 99, and then assigns an empty array to `res`. The two test cases compare the performance of creating the array using `Array.from()` and the spread operator.

**Alternative approaches**

1. **Using the spread operator on an existing array**: Instead of spreading a Set object, you could create an array with the spread operator and add elements from the Set to it.
```javascript
var arr = [...setObj];
```
2. **Converting the Set to an array directly**: If you need to access the elements as a numeric array, you can convert the Set to an array using `Array.from()` or the spread operator on an existing array, and then use `map()` or other array methods.
```javascript
var arr = [...setObj].map(i => i);
```
Keep in mind that these alternative approaches may have different performance characteristics compared to the original test cases.

Set: Array.from vs Spread (version: 0) Benchmark.js

Comparing performance of: `Array.from vs Spread`

Created: 6 years ago by: Guest

Go to the latest result

Array.from

Spread

Historical Performance Data aggregated from 36 community runs

Desktop Results:

Chrome 26 runs

Firefox 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Set: Array.from vs Spread (version: 0) Benchmark.js

Comparing performance of: Array.from vs Spread

Created: 6 years ago by: Guest

Go to the latest result

Array.from

Spread

Historical Performance Data aggregated from 36 community runs

Desktop Results:

Chrome 26 runs

Firefox 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Array.from vs Spread`