Benchmark: for...of Set vs. array conversion

Tests:

for...of
const set = new Set(); for (let i = 0; i < 10000; i++) { set.add(Math.random()); } let n = 0; for (const j of set) { n++; }
array
const set = new Set(); for (let i = 0; i < 10000; i++) { set.add(Math.random()); } let n = 0; const arr = [...set]; for (let j = 0; j < arr.length; j++) { n++; }
array from
const set = new Set(); for (let i = 0; i < 10000; i++) { set.add(Math.random()); } let n = 0; const arr = Array.from(set); for (let j = 0; j < arr.length; j++) { n++; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for...of
array
array from

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 88 on Windows

View result in a separate tab

Test name	Executions per second
for...of	465.6 Ops/sec
array	469.0 Ops/sec
array from	468.8 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided benchmark, MeasureThat.net, tests the performance difference between three approaches for iterating over a Set data structure in JavaScript: `for...of` loop with direct iteration, array conversion using spread operator (`[...]`) or `Array.from()` method.

**Benchmark Definition**

The benchmark definition represents an individual test case. It consists of:

1. A description of the test.
2. Script preparation code (none in this case).
3. HTML preparation code (none in this case).

The benchmark itself is defined by two test cases: "for...of" and "array". Each test case has a specific implementation that exercises the Set data structure.

**Options Compared**

Three options are compared:

1. **Direct Iteration with `for...of` loop**: This approach uses the `for...of` loop to iterate over the Set directly, without converting it to an array.
2. **Array Conversion using Spread Operator (`[...]`)**: This approach converts the Set to an array using the spread operator (`[...]`).
3. **Array Conversion using `Array.from()` method**: This approach converts the Set to an array using the `Array.from()` method.

**Pros and Cons**

Each approach has its pros and cons:

1. **Direct Iteration with `for...of` loop**:
	* Pros: No extra memory allocation or object creation, as it iterates over the Set directly.
	* Cons: May not be compatible with older browsers that do not support `for...of` loop.
2. **Array Conversion using Spread Operator (`[...]`) and `Array.from()` method**:
	* Both methods involve extra memory allocation and object creation to convert the Set to an array, which can lead to performance overhead.
	* However, these approaches are more widely supported across browsers.

**Other Considerations**

1. **Memory Allocation**: The first approach (direct iteration) does not require any additional memory allocation, while the second two approaches involve creating a new array object, which can lead to increased memory usage and potential performance issues in certain scenarios.
2. **Browser Support**: The `for...of` loop is supported by modern browsers, but older browsers may not support it.

**Library Used**

None of the test cases explicitly use any libraries other than the built-in JavaScript Set data structure.

**Special JS Feature or Syntax**

The `for...of` loop is a newer feature introduced in ECMAScript 2015 (ES6), which allows iterating over arrays and other iterable objects. The spread operator (`[...]`) was also introduced in ES6, and the `Array.from()` method has been available since ES5.

**Benchmark Result**

The latest benchmark results show that:

* **Array Conversion using Spread Operator (`[...]`)**: 469 executions per second (Chrome 88, Desktop, Windows)
* **Array Conversion using `Array.from()` method**: 468 executions per second (Chrome 88, Desktop, Windows)
* **Direct Iteration with `for...of` loop**: 465 executions per second (Chrome 88, Desktop, Windows)

Note that the results may vary depending on the browser version, device platform, and operating system used.

Related benchmarks:

for...of Set vs. array conversion (version: 0)

Comparing performance of: for...of vs array vs array from

Created: 3 years ago by: Guest

Jump to the latest result

for...of

array

array from

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