Benchmark: Lodash DifferenceWith vs Native

HTML Preparation code:

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

Script Preparation code:

var oldArr = [
  {
    "id": 52
  },
  {
    "id": 76
  },
  {
    "id": 13
  },
  {
    "id": 96
  },
  {
    "id": 27
  },
  {
    "id": 8
  },
  {
    "id": 23
  },
  {
    "id": 63
  },
  {
    "id": 25
  }
]

var newArr = [
{
    "id": 52
  },
  {
    "id": 76
  },
  {
    "id": 13
  },
  {
    "id": 96
  },
  {
    "id": 27
  },
  {
    "id": 8
  },
  {
    "id": 23
  },
  {
    "id": 63
  },
  {
    "id": 25
  },
  {
    "id": 1
  },
]

Tests:

Native
newArr.reduce((ids, {id}) => { return ids.concat( !oldArr.some(oldItem => oldItem.id === id) ? id : [] ); }, [])
Lodash.js filter
_.differenceWith(newArr, oldArr, _.isEqual);

Historical Performance Data aggregated from 25 community runs

Desktop Results:

Chrome 25 runs

Native

1.5M/s

Lodash.js filter

46K/s

Fastest: Native (32.3x faster)

View exact numbers

✓ Native: 1,495,820 ops/sec
• Lodash.js filter: 46,378 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
Native
Lodash.js filter

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 138 on Mac OS X 10.15.7

View result in a separate tab

Native

2.6M/s

Lodash.js filter

37K/s

View exact numbers

Test name	Executions per second
✓ Native	2,600,125 Ops/sec
Lodash.js filter	37,287 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested.

**Benchmark Overview**

The benchmark compares the performance of two approaches to find the differences between two arrays:

1. **Native**: Using the `reduce` method on the original array (`oldArr`) to create a new array with only the elements that are not present in `newArr`.
2. **Lodash.js filter**: Using the `_differenceWith` function from the Lodash library to find the differences between `newArr` and `oldArr`.

**Native Approach**

The Native approach uses the `reduce` method, which is a built-in JavaScript method that applies a reduction function to an array. The reduction function takes two arguments: the accumulator (initially set to an empty array) and the current element of the array.

The code snippet inside the `reduce` method checks if the current element (`id`) exists in the `oldArr` array using the `some` method. If it doesn't exist, the `id` is appended to the accumulator array. The resulting array with only the unique elements from `newArr` is returned.

**Pros and Cons of Native Approach**

Pros:

* No additional library dependencies required
* Built-in JavaScript method for simplicity

Cons:

* May be slower than the Lodash.js filter approach due to the overhead of using a custom reduction function
* More verbose code compared to the Lodash.js filter approach

**Lodash.js filter Approach**

The Lodash.js filter approach uses the `_differenceWith` function from the Lodash library, which takes three arguments:

1. The first array (`newArr`)
2. The second array (`oldArr`)
3. A comparison function (`_.isEqual`)

The `_differenceWith` function iterates through both arrays and checks if each element in `newArr` exists in `oldArr`. If not, it adds the element to the result array.

**Pros and Cons of Lodash.js filter Approach**

Pros:

* Faster performance due to optimized native implementation
* More concise code compared to the Native approach

Cons:

* Requires an additional library dependency (Lodash)
* May have additional overhead due to the inclusion of a separate library

**Other Considerations**

1. **Array length and complexity**: The larger the arrays, the more time-consuming the comparison process may be.
2. **Performance variations**: Different browsers or environments might exhibit varying performance due to their own optimization techniques or hardware capabilities.

**Special JavaScript Features/Syntax Used**

In this benchmark, the following special JavaScript features are used:

* `reduce` method
* `some` method
* Custom reduction function in the Native approach
* `_differenceWith` function from Lodash library

However, these features and syntaxes are not specific to JavaScript and are widely available in most programming languages.

**Alternatives**

If you were to implement a custom solution without using the Lodash library, you could consider:

1. Using a different comparison algorithm, such as hashing or bit manipulation.
2. Implementing a more efficient data structure, like a trie or a suffix tree, to facilitate faster lookups.
3. Utilizing parallel processing techniques, like concurrency or multi-threading, to take advantage of multiple CPU cores.

Keep in mind that these alternatives would require additional implementation effort and may not be as performant as the optimized native methods or Lodash library implementations.

Lodash DifferenceWith vs Native (version: 0) Benchmark.js

Comparing performance of: `Native vs Lodash.js filter`

Created: 6 years ago by: Guest

Go to the latest result

Native

Lodash.js filter

Historical Performance Data aggregated from 25 community runs

Desktop Results:

Chrome 25 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 DifferenceWith vs Native (version: 0) Benchmark.js

Comparing performance of: Native vs Lodash.js filter

Created: 6 years ago by: Guest

Go to the latest result

Native

Lodash.js filter

Historical Performance Data aggregated from 25 community runs

Desktop Results:

Chrome 25 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: `Native vs Lodash.js filter`