Benchmark: Lodash: differenceBy vs reduce

HTML Preparation code:

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

Script Preparation code:

var allWorkspaces = [
  { id: 'id', name: 'name' },
  { id: 'id0', name: 'name0' },
  { id: 'id1', name: 'name1' },
  { id: 'id2', name: 'name2' },
  { id: 'id3', name: 'name3' },
  { id: 'id4', name: 'name4' },
  { id: 'id5', name: 'name5' },
  { id: 'id6', name: 'name6' },
  { id: 'id7', name: 'name7' },
  { id: 'id8', name: 'name8' },
  { id: 'id9', name: 'name9' },
  { id: 'id10', name: 'name10' },
  { id: 'id11', name: 'name11' },
  { id: 'id12', name: 'name12' },
  { id: 'id13', name: 'name13' },
  { id: 'id14', name: 'name14' },
  { id: 'id15', name: 'name15' },
  { id: 'id16', name: 'name16' },
  { id: 'id17', name: 'name17' },
  { id: 'id18', name: 'name18' },
  { id: 'id19', name: 'name19' },
  { id: 'id20', name: 'name20' },
  { id: 'id21', name: 'name21' },
  { id: 'id22', name: 'name22' },
  { id: 'id23', name: 'name23' },
  { id: 'id24', name: 'name24' },
  { id: 'id25', name: 'name25' },
  { id: 'id26', name: 'name26' },
  { id: 'id27', name: 'name27' },
  { id: 'id28', name: 'name28' },
  { id: 'id29', name: 'name29' },
  { id: 'id30', name: 'name30' },
  { id: 'id31', name: 'name31' },
  { id: 'id32', name: 'name32' },
  { id: 'id33', name: 'name33' },
  { id: 'id34', name: 'name34' },
  { id: 'id35', name: 'name35' },
  { id: 'id36', name: 'name36' },
  { id: 'id37', name: 'name37' },
  { id: 'id38', name: 'name38' },
  { id: 'id39', name: 'name39' },
  { id: 'id40', name: 'name40' },
  { id: 'id41', name: 'name41' },
  { id: 'id42', name: 'name42' },
  { id: 'id43', name: 'name43' },
  { id: 'id44', name: 'name44' },
  { id: 'id45', name: 'name45' },
  { id: 'id46', name: 'name46' },
  { id: 'id47', name: 'name47' },
  { id: 'id48', name: 'name48' },
  { id: 'id49', name: 'name49' },
  { id: 'id50', name: 'name50' },
  { id: 'id51', name: 'name51' },
  { id: 'id52', name: 'name52' },
  { id: 'id53', name: 'name53' },
  { id: 'id54', name: 'name54' },
  { id: 'id55', name: 'name55' },
  { id: 'id56', name: 'name56' },
  { id: 'id57', name: 'name57' },
  { id: 'id58', name: 'name58' },
  { id: 'id59', name: 'name59' },
  { id: 'id60', name: 'name60' },
  { id: 'id61', name: 'name61' },
  { id: 'id62', name: 'name62' },
  { id: 'id63', name: 'name63' },
  { id: 'id64', name: 'name64' },
  { id: 'id65', name: 'name65' },
  { id: 'id66', name: 'name66' },
  { id: 'id67', name: 'name67' },
]

var selectedWorkspaces = [
 { id: 'id30', name: 'name30' },
  { id: 'id1', name: 'name1' },
  { id: 'id62', name: 'name62' },
  { id: 'id25', name: 'name25' },
  { id: 'id42', name: 'name42' },
  { id: 'id64', name: 'name64' },
  { id: 'id27', name: 'name27' },
  { id: 'id67', name: 'name67' },
  { id: 'id52', name: 'name52' },
  { id: 'id0', name: 'name0' },
  { id: 'id41', name: 'name41' },
  { id: 'id5', name: 'name5' },
  { id: 'id36', name: 'name36' },
  { id: 'id44', name: 'name44' },
  { id: 'id46', name: 'name46' },
  { id: 'id45', name: 'name45' },
  { id: 'id63', name: 'name63' },
  { id: 'id15', name: 'name15' },
  { id: 'id18', name: 'name18' },
  { id: 'id66', name: 'name66' },
  { id: 'id47', name: 'name47' },
  { id: 'id43', name: 'name43' },
  { id: 'id17', name: 'name17' },
  { id: 'id60', name: 'name60' },
  { id: 'id', name: 'name' },
  { id: 'id4', name: 'name4' },
  { id: 'id39', name: 'name39' },
  { id: 'id22', name: 'name22' },
  { id: 'id54', name: 'name54' },
  { id: 'id55', name: 'name55' },
  { id: 'id57', name: 'name57' },
  { id: 'id8', name: 'name8' },
  { id: 'id9', name: 'name9' },
]

Tests:

Lodash differenceBy
_.differenceBy( allWorkspaces, selectedWorkspaces, 'id', )
javascript filter map
const workspacesIds = selectedWorkspaces.map((workspace) => workspace.id); allWorkspaces .filter((workspace) => !workspacesIds.includes(workspace.id)) .map((workspace) => workspace.id);
javascript reduce
const workspacesIds = new Set(selectedWorkspaces.map((workspace) => workspace.id)); allWorkspaces.reduce((acc, workspace) => { if (!workspacesIds.has(workspace)) { acc.push(workspace) } return acc; }, [])

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash differenceBy
javascript filter map
javascript reduce

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

This benchmark compares the performance of three different methods for filtering out selected items from a larger list of objects in JavaScript. Specifically, it evaluates:

1. **Lodash's `differenceBy` method**,
2. A native JavaScript solution using `filter` and `map`, and
3. A native JavaScript solution using `reduce`.

### 1. **Lodash `differenceBy`**

**Benchmark Definition**:
```javascript
_.differenceBy(
  allWorkspaces,
  selectedWorkspaces,
  'id'
)
```

**Description**:
`differenceBy` is a utility function from the Lodash library that compares two arrays of objects and returns the elements from the first array not present in the second, based on a specified criterion (`'id'` in this case).

**Pros**:
- Concise and clear syntax.
- Well-optimized for performance, especially with large datasets, as Lodash is designed to handle such operations efficiently.

**Cons**:
- Requires an external library, which can add overhead if Lodash is not already part of the project.
- Possible increased bundle size if used in a frontend environment.

**Library Purpose**:
Lodash is a modern JavaScript utility library that provides various helper functions for common programming tasks, making coding easier and more efficient.

---

### 2. **JavaScript `filter` and `map`**

**Benchmark Definition**:
```javascript
const workspacesIds = selectedWorkspaces.map((workspace) => workspace.id);
allWorkspaces
  .filter((workspace) => !workspacesIds.includes(workspace.id))
  .map((workspace) => workspace.id);
```

**Description**:
This method first constructs an array of IDs from the `selectedWorkspaces` using `map`, then filters `allWorkspaces` to find items whose IDs are not in this array.

**Pros**:
- Purely JavaScript implementation, which means no additional dependencies are required.
- Familiar syntax for those accustomed to array manipulation methods.

**Cons**:
- The use of `includes` on each iteration of `filter` results in an O(n^2) complexity in the worst case, especially with larger datasets.
- Potential performance drawbacks due to the intermediate array (`workspacesIds`).

---

### 3. **JavaScript `reduce`**

**Benchmark Definition**:
```javascript
const workspacesIds = new Set(selectedWorkspaces.map((workspace) => workspace.id));

allWorkspaces.reduce((acc, workspace) => {
  if (!workspacesIds.has(workspace.id)) {
    acc.push(workspace);
  }
  return acc;
}, []);
```

**Description**:
This approach utilizes `reduce` to iterate over `allWorkspaces`, filtering out the ones whose IDs exist in a Set constructed from `selectedWorkspaces`.

**Pros**:
- More efficient than the `filter` and `map` combination due to the constant time complexity check (`has`) provided by the Set, leading to O(n) complexity overall.
- Concise in code but without use of intermediate arrays.

**Cons**:
- Slightly more complex syntax than the straightforward `filter` and `map`.
- Less intuitive for beginners not familiar with `reduce` or Set data structures.

---

### Benchmark Results

The benchmark results indicate that the fastest method was the native JavaScript `reduce` approach with approximately **588,670 executions per second**. The `filter` and `map` combination followed with about **442,551 executions per second**, and the Lodash `differenceBy` method was the slowest at **310,594 executions per second**.

### Considerations

- **Overhead of Libraries**: When using a library like Lodash, consider whether the performance gain is worth the overhead introduced if the library is not already part of your project. For most small to medium applications, native methods may perform similarly.
- **Readability vs. Performance**: Choose a method that balances clarity and performance, especially when working in teams. If a more readable solution has acceptable performance, it might be preferable over a more complex but faster solution.
- **Data Size**: The implications of each approach may vary with different dataset sizes. For large datasets, the choice of using `Set` for lookups in the `reduce` approach will yield significant performance benefits.

### Other Alternatives

- Other libraries like **Ramda** or **Underscore.js** can provide similar functionality as Lodash but may have different performance characteristics or syntactic sugar.
- Custom implementations may be tailored based on specific use cases or optimized for specific data structures, but they require more effort in terms of development and maintenance.

Overall, the decision to use one method over another should consider performance metrics, code readability, maintainability, and project requirements.

Latest run results:

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

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

Browser/OS: Chrome 129 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Lodash differenceBy	310594.4 Ops/sec
javascript filter map	442551.3 Ops/sec
javascript reduce	588669.9 Ops/sec

Related benchmarks:

Lodash: differenceBy vs reduce (version: 0)

Comparing performance of: lodash differenceBy with javascript reduce

Comparing performance of: Lodash differenceBy vs javascript filter map vs javascript reduce

Created: one month ago by: Registered User

Jump to the latest result

Lodash differenceBy

javascript filter map

javascript reduce

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):