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>

AخA
 
<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());
}

​x
 
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)
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)
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)
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)
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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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: 3 months ago)

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
Spreading	332243.1 Ops/sec
Set.forEach + Set.add	339959.1 Ops/sec
Generators	283566.5 Ops/sec
for loop	325586.7 Ops/sec

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

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:

Spreading (using the spread operator)
Using Set.forEach and Set.add
Using a generator function
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

Spreading: Pros - concise, efficient, and easy to read. Cons - may not be as intuitive for complex merging scenarios.
Set.forEach + Set.add: Pros - straightforward and easily understandable. Cons - can be slower due to iteration overhead.
Generators: Pros - functional programming style, streaming data processing. Cons - might require more setup or understanding of generators.
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!

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 6 months ago):