Benchmark: Array.from VS spreading for "new Set()"

Script Preparation code:

var handredSet = new Set(new Array(100).fill(0).map((x) => Math.random()));
var thousandsSet = new Set(new Array(10000).fill(0).map((x) => Math.random()));
var millionSet = new Set(new Array(1000000).fill(0).map((x) => Math.random()));

Tests:

Array.from (100 elements)
const valueFromArray = Array.from(handredSet)
spreading (100 elements)
const valueFromSpreading = [...handredSet]
Array.from (10k elements)
const valueFromArray = Array.from(thousandsSet)
spreading (10k elements)
const valueFromSpreading = [...thousandsSet]
Array.from (1M elements)
const valueFromArray = Array.from(millionSet)
spreading (1M elements)
const valueFromSpreading = [...millionSet]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from (100 elements)
spreading (100 elements)
Array.from (10k elements)
spreading (10k elements)
Array.from (1M elements)
spreading (1M elements)

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 123 on Windows

View result in a separate tab

spreading (100 elements)

6.3M/s

Array.from (100 elements)

4.5M/s

Array.from (10k elements)

84K/s

spreading (10k elements)

84K/s

spreading (1M elements)

384/s

Array.from (1M elements)

383/s

View exact numbers

Test name	Executions per second
✓ spreading (100 elements)	6,255,190 Ops/sec
Array.from (100 elements)	4,536,854 Ops/sec
Array.from (10k elements)	83,767 Ops/sec
spreading (10k elements)	83,663 Ops/sec
spreading (1M elements)	384 Ops/sec
Array.from (1M elements)	383 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 benchmark definition, test cases, and results to explain what's being tested.

**Benchmark Definition**

The benchmark is designed to compare two approaches for creating an array from a set:

1. Using `Array.from()`: This method takes a set as an argument and returns a new array containing all elements of the set.
2. Spreading the set using the spread operator (`...`): This approach creates a new array by iterating over each element in the set and adding it to the new array.

**Test Cases**

There are four test cases, each comparing the performance of one of these approaches with different set sizes:

1. `Array.from(100 elements)`: Creating an array from a set with 100 elements.
2. `spreading(100 elements)`: Using the spread operator to create an array from a set with 100 elements.
3. `Array.from(10k elements)`: Creating an array from a set with 10,000 elements.
4. `spreading(10k elements)`: Using the spread operator to create an array from a set with 10,000 elements.
5. `Array.from(1M elements)`: Creating an array from a set with 1,000,000 elements.
6. `spreading(1M elements)`: Using the spread operator to create an array from a set with 1,000,000 elements.

**Pros and Cons**

* **Using `Array.from()`**: This approach is concise and readable, but it may have a slight performance overhead due to the method call.
	+ Pros: Easy to read and write, no need to worry about iteration details.
	+ Cons: May incur a small performance penalty.
* **Spreading the set using the spread operator (`...`)**: This approach is simple and efficient, but it requires manual iteration over each element in the set.
	+ Pros: Can be faster for large sets, as it avoids the overhead of a method call.
	+ Cons: Requires more code and may be less readable.

**Library Used**

The benchmark uses the built-in `Set` class, which is part of the JavaScript standard library. The `Set` class provides an efficient way to store unique values, and its methods are optimized for performance.

**Special JS Features or Syntax**

None mentioned in this specific benchmark.

**Other Alternatives**

If you wanted to compare other approaches for creating arrays from sets, some alternatives could be:

* Using a loop to iterate over each element in the set: `const array = []; for (const element of mySet) { array.push(element); }`
* Using a library like Lodash's `_.map()` method: `const array = _.map(mySet, () => {});`

Keep in mind that these alternatives may have their own performance characteristics and trade-offs.

Array.from VS spreading for "new Set()" (version: 0) Benchmark.js

Comparing performance of: `Array.from (100 elements) vs spreading (100 elements) vs Array.from (10k elements) vs spreading (10k elements) vs Array.from (1M elements) vs spreading (1M elements)`

Created: 2 years ago by: Guest

Go to the latest result

Array.from (100 elements)

spreading (100 elements)

Array.from (10k elements)

spreading (10k elements)

Array.from (1M elements)

spreading (1M elements)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array.from VS spreading for "new Set()" (version: 0) Benchmark.js

Comparing performance of: Array.from (100 elements) vs spreading (100 elements) vs Array.from (10k elements) vs spreading (10k elements) vs Array.from (1M elements) vs spreading (1M elements)

Created: 2 years ago by: Guest

Go to the latest result

Array.from (100 elements)

spreading (100 elements)

Array.from (10k elements)

spreading (10k elements)

Array.from (1M elements)

spreading (1M elements)

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 (100 elements) vs spreading (100 elements) vs Array.from (10k elements) vs spreading (10k elements) vs Array.from (1M elements) vs spreading (1M elements)`