Benchmark: Set union methods even more

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/nanoid/4.0.1/index.browser.js" integrity="sha512-YFaQHp+hWX9CMeIMngYK23kSIWaYlgsswmzmIdEw/HcK/5NLhXY2MbT0wQB5DnUzjW1uky4quIHtksukqZGkMw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Script Preparation code:

const SET_SIZE = 3000;

var set1 = new Set()
var set2 = new Set()
while (i < SET_SIZE) {
    const nid = 'key:'+Math.random();
    set1.add(nid);
    if (i % 2 == 0) set2.add(nid);
    i++;
}
while (i < SET_SIZE / 2) {
    set2.add('key:'+Math.random());
}

Tests:

Spreading
const set3 = new Set([...set1, ...set2]); console.log(set3.size)
Set.forEach + Set.add
const set3 = new Set(set1); set2.forEach(el => set3.add(el)); console.log(set3.size)
Generators
const set3 = new Set(function*() { yield* set1; yield* set2; }()); console.log(set3.size)
for loop
const set3 = new Set(set1); for(let el of set2) set3.add(el) console.log(set3.size)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spreading
Set.forEach + Set.add
Generators
for loop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 115 on Windows

View result in a separate tab

Test name	Executions per second
Spreading	3253.7 Ops/sec
Set.forEach + Set.add	3642.4 Ops/sec
Generators	2791.5 Ops/sec
for loop	3823.1 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to help explain the provided benchmark.

**Benchmark Overview**

The benchmark measures different ways to union JavaScript Sets, which are collections of unique values. The test creates two sets, `set1` and `set2`, with random elements, and then compares four different methods for merging these sets:

1. Spreading (using the spread operator)
2. Using `Set.forEach` and `Set.add`
3. Using a generator function
4. Using a traditional `for` loop

**Options Compared**

Each option is compared to determine which one performs the best in terms of execution speed.

* **Spreading**: This method uses the spread operator (`...`) to merge the sets. It's a concise and efficient way to create a new set with all elements from two existing sets.
* **Set.forEach + Set.add**: This method iterates over each element in one set using `forEach` and adds it to another set using `add`. While straightforward, this approach can be slower than spreading due to the overhead of iteration.
* **Generators**: Using a generator function (`function*() { yield* ... }`) allows for a more functional programming style. This method yields each element from one set, which is then added to another set. Generators can be an efficient way to process data in a streaming fashion.
* **for loop**: A traditional `for` loop is used to iterate over elements and add them to the target set.

**Pros and Cons of Each Approach**

1. **Spreading**: Pros - concise, efficient, and easy to read. Cons - may not be as intuitive for complex merging scenarios.
2. **Set.forEach + Set.add**: Pros - straightforward and easily understandable. Cons - can be slower due to iteration overhead.
3. **Generators**: Pros - functional programming style, streaming data processing. Cons - might require more setup or understanding of generators.
4. **for loop**: Pros - familiar control flow, easy to understand. Cons - verbose, may not be as efficient for large datasets.

**Libraries and Special Features**

The benchmark uses the `nanoid` library, which is a simple and secure way to generate random IDs. This library is loaded via a script tag in the HTML preparation code.

There are no special JavaScript features or syntax used in this benchmark beyond what's standard in modern JavaScript (ES6+).

**Alternatives**

Other alternatives for merging sets could include:

* Using `Set.prototype.union()` or `Set.prototype.intersection()`, if available
* Utilizing a third-party library like Lodash's `unionBy` function
* Implementing custom iteration logic using `for...of` loops and conditional statements

Keep in mind that the choice of method depends on specific use cases, performance requirements, and personal preference.

I hope this explanation helps!

Related benchmarks:

Set union methods even more (version: 0)

Different ways to union JS Sets

Comparing performance of: Spreading vs Set.forEach + Set.add vs Generators vs for loop

Created: one year ago by: Guest

Jump to the latest result

Spreading

Set.forEach + Set.add

Generators

for loop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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