Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Set union methods
(version: 0)
Different ways to union JS Sets
Comparing performance of:
Spreading vs Set.forEach + Set.add vs Generators
Created:
2 years ago
by:
Guest
Jump to the latest result
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 = 1000; 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)
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Spreading
Set.forEach + Set.add
Generators
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36
Browser/OS:
Chrome 144 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
Spreading
717428.1 Ops/sec
Set.forEach + Set.add
709120.8 Ops/sec
Generators
604514.9 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what's being tested, compared, and analyzed. **Benchmark Overview** The benchmark is designed to compare different methods for unionizing JavaScript Sets. A Set in JavaScript is an unordered collection of unique values. The benchmark aims to determine which method is most efficient for combining two Sets. **Test Cases** There are three test cases: 1. **Spreading**: This method uses the spread operator (`...`) to create a new Set from the elements of `set1` and `set2`. ```javascript const set3 = new Set([...set1, ...set2]); console.log(set3.size); ``` Pros: Simple and concise. This method is widely supported across modern browsers. Cons: May not be as efficient as other methods for very large Sets due to the creation of a new array. 2. **Set.forEach + Set.add**: This method iterates over `set1` using `forEach` and adds each element to `set3` using `add`. ```javascript const set3 = new Set(set1); set2.forEach(el => set3.add(el)); console.log(set3.size); ``` Pros: Can be more efficient for large Sets because it avoids creating a temporary array. Cons: May have higher overhead due to the iteration and function calls. 3. **Generators**: This method uses a generator function to yield elements from `set1` and `set2`, which are then added to `set3`. ```javascript const set3 = new Set(function*() { yield* set1; yield* set2; }()); console.log(set3.size); ``` Pros: Can be more efficient for very large Sets because it avoids creating temporary arrays. Cons: May have higher overhead due to the creation of a generator function and its associated computations. **Library Used** The benchmark uses the `nanoid` library, which generates random IDs. However, this library is not explicitly used in the test cases; instead, it's used for the browser's identification string (`RawUAString`) in the benchmark results. **Special JavaScript Features or Syntax** None of the methods use any special JavaScript features or syntax that would affect their performance. **Alternatives** Other alternatives for unionizing Sets include: * Using the `Set.prototype.union()` method (not supported in older browsers). * Using a library like `lodash.set` or `underscore.util.union`. * Implementing a custom union function using bitwise operations or other techniques. Keep in mind that the choice of method depends on the specific use case, performance requirements, and compatibility considerations.
Related benchmarks:
_.union vs native Set() implementation
Array Intersection vs. Set Intersection vs. Lodash
Array Intersection vs. Set Intersection vs. Lodash part 3
Array Intersection vs. Set Intersection vs. Lodash vs Sets
Array Intersection vs. Set Intersection vs. Lodash part 3 mix
Comments
Confirm delete:
Do you really want to delete benchmark?