Benchmark: array diff (lodash difference / sets / includes) perf

Script Preparation code:

function dec2hex (dec) {
  return dec < 10
    ? '0' + String(dec)
    : dec.toString(16)
}

function generateId (len) {
  var arr = new Uint8Array((len || 40) / 2)
  window.crypto.getRandomValues(arr)
  return Array.from(arr, dec2hex).join('')
}

var a = []
var b = []
for( let i = 0; i < 1000; i++)
{
  a[i] = generateId(16)
  b[i] = generateId(16)
}

Tests:

with Sets
function diff(a, b) { const as = new Set(a); const bs = new Set(b); return Array.from(new Set([...as].filter(x => !bs.has(x)))); }
with filter-includes
const difference = a.filter(x => !b.includes(x));
lodash.difference
_.difference(a, b)

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

with Sets

194.7M/s

lodash.difference

17K/s

with filter-includes

505/s

Fastest: with Sets (385351.0x faster)

View exact numbers

✓ with Sets: 194,678,432 ops/sec
• lodash.difference: 17,443 ops/sec
• with filter-includes: 505 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
with Sets
with filter-includes
lodash.difference

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:152.0) Gecko/20100101 Firefox/152.0

Browser/OS: Firefox 152 on Windows

View result in a separate tab

with Sets

891.9M/s

lodash.difference

4K/s

with filter-includes

202/s

View exact numbers

Test name	Executions per second
✓ with Sets	891,877,248 Ops/sec
lodash.difference	4,434 Ops/sec
with filter-includes	202 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark measures the performance of three different approaches for finding the difference between two arrays in JavaScript: using `Set`, `filter` with `includes`, and Lodash's `difference` function.

**Approaches Compared**

1. **With Sets**: This approach uses a `Set` data structure to store unique elements from each array, and then filters out elements that are present in both sets.
2. **With filter-includes**: This approach uses the `filter` method with the `includes` method to find elements that are not present in the second array.
3. **Lodash.difference**: This approach uses Lodash's built-in `difference` function, which is designed specifically for finding differences between arrays.

**Pros and Cons of Each Approach**

1. **With Sets**:
	* Pros: Simple and efficient, can be faster for large datasets due to the use of a `Set`.
	* Cons: Requires two separate data structures (a `Set` for each array), which can lead to higher memory usage.
2. **With filter-includes**:
	* Pros: Easy to implement and understand, uses existing methods (`filter` and `includes`) that are widely available in JavaScript.
	* Cons: Can be slower than the other approaches due to the overhead of method calls and iterations.
3. **Lodash.difference**:
	* Pros: Highly optimized and designed specifically for this task, can take advantage of parallel processing (in some cases).
	* Cons: Requires Lodash library to be loaded, which adds an extra dependency.

**Library Used**

The `diff` function in the benchmark definition uses a custom implementation that creates two separate sets from each array using `Set`. The actual implementation is:
```javascript
const as = new Set(a);
const bs = new Set(b);

return Array.from(new Set([...as].filter(x => !bs.has(x))));
```
This library is not a standard JavaScript library, but rather a custom implementation designed for this specific benchmark.

**Special JS Feature/Syntax**

None of the approaches used special JavaScript features or syntax. They all rely on basic JavaScript methods and data structures (arrays, `Set`, `filter`).

**Alternatives**

Other alternatives to find differences between two arrays in JavaScript include:

1. Using `indexOf()` method: Find elements that are not present in the second array by checking if an element is not at index `-1` using `indexOf()`.
2. Using a `Map`: Similar to using `Set`, but maps can be useful for more complex data structures or when preserving order matters.
3. Using external libraries: There are many other libraries available that provide optimized implementations of array differences, such as `Array.prototype.diff()` from the `fast-json-stubs` library.

It's worth noting that the performance difference between these approaches may not be significant in all cases, and the choice ultimately depends on the specific requirements and constraints of the project.

array diff (lodash difference / sets / includes) perf (version: 0)

Comparing performance of: `with Sets vs with filter-includes vs lodash.difference`

Created: 2 years ago by: Registered User

Go to the latest result

with Sets

with filter-includes

lodash.difference

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

array diff (lodash difference / sets / includes) perf (version: 0)

Comparing performance of: with Sets vs with filter-includes vs lodash.difference

Created: 2 years ago by: Registered User

Go to the latest result

with Sets

with filter-includes

lodash.difference

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 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: `with Sets vs with filter-includes vs lodash.difference`