Benchmark: lodash unionWith vs Set for merging without duplicates

HTML Preparation code:

<script src='https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js'></script>

Tests:

Set
const first = [ {a: 3, b: 3, c: "hey"}, {a: 3, b: 2, c: "hey"}, {a: 1, b: 2, c: "bye"}, {a: 3, b: 4, c: "hey"}, {a: 2, b: 1, c: "bye"} ]; const second = [ {a: 3, b: 4, c: "hey"}, {a: 2, b: 1, c: "bye"}, {a: 4, b: 4, c: "sup"}, {a: 3, b: 3, c: "hey"} ]; return [...new Set([...first, ...second])]
unionWith
const first = [ {a: 3, b: 3, c: "hey"}, {a: 3, b: 2, c: "hey"}, {a: 1, b: 2, c: "bye"}, {a: 3, b: 4, c: "hey"}, {a: 2, b: 1, c: "bye"} ]; const second = [ {a: 3, b: 4, c: "hey"}, {a: 2, b: 1, c: "bye"}, {a: 4, b: 4, c: "sup"}, {a: 3, b: 3, c: "hey"} ]; return _.unionWith(first, second, _.isEqual);

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Set

3.1M/s

unionWith

122K/s

Fastest: Set (25.5x faster)

View exact numbers

✓ Set: 3,105,506 ops/sec
• unionWith: 121,829 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Set
unionWith

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36

Browser/OS: Chrome 143 on Mac OS X 10.15.7

View result in a separate tab

Set

3.4M/s

unionWith

155K/s

View exact numbers

Test name	Executions per second
✓ Set	3,388,479 Ops/sec
unionWith	155,304 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a JavaScript microbenchmarking test case on the MeasureThat.net website. The test compares the performance of two approaches for merging arrays without duplicates: using `Set` and using the `_unionWith` function from the Lodash library.

**What is being tested?**

The benchmark tests which approach is faster when merging two arrays, `first` and `second`, to create a new array with no duplicate elements. The input arrays contain objects with multiple properties, including strings and numbers.

**Options compared**

Two options are compared:

1. **Using Set**: This approach uses the built-in `Set` data structure in JavaScript to remove duplicates from the merged array.
2. **Using Lodash `_unionWith` function**: This approach uses the `_unionWith` function from the Lodash library, which provides a more comprehensive way to merge arrays while preserving order and removing duplicates.

**Pros and Cons of each approach**

1. **Using Set**:
	* Pros: Simple, efficient, and widely supported in modern browsers.
	* Cons: May not work correctly for objects with complex properties or non-numeric values (e.g., strings). The spread operator (`...`) is used to convert the arrays to sets, which may lead to unexpected behavior if not handled carefully.
2. **Using Lodash `_unionWith` function**:
	* Pros: More comprehensive and flexible than using a simple `Set`. Preserves order of elements from both input arrays and removes duplicates efficiently.
	* Cons: Requires including the Lodash library, which may increase payload size and potentially impact performance in some cases.

**Lodash library**

The `_unionWith` function is part of the Lodash library, which provides a collection of functional programming helpers for JavaScript. The `_.isEqual` function used in the benchmark comparison ensures that objects are compared correctly when merging arrays.

**Other considerations**

When working with arrays and objects, it's essential to consider the following:

* Using `Set` can be beneficial for simple cases, but may not work correctly for complex data structures.
* Including external libraries like Lodash can impact performance and payload size.
* When using the spread operator (`...`) to convert arrays to sets or other collections, ensure that you handle any potential edge cases or unexpected behavior.

**Alternatives**

Other alternatives for merging arrays without duplicates include:

1. Using the `Array.prototype.reduce()` method with an accumulator function to combine elements while removing duplicates.
2. Utilizing a library like Immutable.js or Ramda, which provide more advanced array manipulation functions and data structures.
3. Implementing your own custom solution using vanilla JavaScript, which may be necessary for specific use cases where external libraries are not feasible.

In summary, the benchmark comparison between using `Set` and the Lodash `_unionWith` function highlights the trade-offs between simplicity, efficiency, and comprehensiveness when merging arrays without duplicates in JavaScript.

lodash unionWith vs Set for merging without duplicates (version: 0) Benchmark.js

Comparing performance of: `Set vs unionWith`

Created: 7 years ago by: Guest

Go to the latest result

Set

unionWith

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

lodash unionWith vs Set for merging without duplicates (version: 0) Benchmark.js

Comparing performance of: Set vs unionWith

Created: 7 years ago by: Guest

Go to the latest result

Set

unionWith

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

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: `Set vs unionWith`