Benchmark: Lodash "unionWith" "unionBy" and isEqual

HTML Preparation code:

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

Script Preparation code:

var users = [
  { 'name': 'barney',  'age': 36 },
  { 'name': 'pebbles', 'age': 5 }
];

var newUsers = [
  { 'name': 'fred',    'age': 40 },
  { 'name': 'barney',  'age': 36 },
  { 'name': 'pebbles', 'age': 2 }
];

for(let i = 0; i < 2000; i++) {
  var newUser = { 'name': 'user_' + i, 'age': Math.floor(Math.random() * i) };
  newUsers.push(newUser);
}

Tests:

unionWith
const unionUsers1 = _.unionWith(newUsers, users, _.isEqual);
unionBy
const unionUsers2 = _.unionBy(newUsers, users, 'name');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
unionWith
unionBy

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36

Browser/OS: Chrome 88 on Windows

View result in a separate tab

Test name	Executions per second
unionWith	0.6 Ops/sec
unionBy	3465.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark JSON and explain what's being tested, compared, and considered.

**Benchmark Definition**

The benchmark is testing the performance of two functions from the Lodash library: `unionWith` and `unionBy`. Both functions are used to combine two arrays into a single array. The main difference between them lies in how they handle duplicate elements:

*   `unionWith`: It uses a custom comparison function (`_.isEqual`) to determine whether an element is new or not.
*   `unionBy`: It uses the value of each element as a key to determine whether it's already present in the resulting array.

**Script Preparation Code**

The script preparation code creates two arrays, `users` and `newUsers`, with some duplicate elements. The `for` loop then generates new user objects with random properties (name and age) and adds them to the `newUsers` array for 2000 iterations.

**Html Preparation Code**

The HTML preparation code includes a script tag that loads the Lodash library from a CDN. This is necessary because the benchmark tests use functions from this library.

**Benchmark Results**

The latest benchmark results show the execution speed (in executions per second) of both `unionWith` and `unionBy` on different browsers and devices.

**Comparison and Considerations**

When comparing these two approaches, we have:

*   **Performance**: `unionBy` is generally faster than `unionWith` because it can take advantage of the JavaScript engine's caching mechanism for array lookups. This is due to how `unionBy` uses the element values as keys, allowing the engine to predict which elements are likely to be present in the resulting array.
*   **Memory Usage**: Both functions have similar memory usage since they both create a new array with combined elements. However, `unionBy` might use less memory because it doesn't require a custom comparison function like `unionWith`.
*   **Code Readability and Maintainability**: `unionBy` is often considered more readable and maintainable due to its simplicity and the fact that it uses built-in JavaScript features.

**Lodash Library**

The Lodash library provides various utility functions for tasks like array manipulation, functional programming, and more. In this benchmark, we're using two of its array functions: `unionWith` and `unionBy`. The purpose of these functions is to help developers simplify their code and improve performance by leveraging optimized implementations.

**Special JavaScript Features or Syntax**

In the script preparation code, we see usage of the following special features:

*   **Template Literals**: Used for creating multiline string literals. This allows us to write more readable and maintainable code.
*   **For-of Loop with Generator Expressions**: Not explicitly used in this benchmark but could be useful if generating new user objects needed to be done differently.

**Other Alternatives**

If you're interested in exploring alternative approaches or tools, consider the following:

*   **Built-in Array Functions**: Instead of using Lodash functions, you can use built-in array methods like `concat()`, `set()`, and `filter()` to achieve similar results.
*   **Custom Implementations**: If you have specific requirements not met by existing libraries, creating a custom implementation might be the way forward. However, this approach requires significant expertise in JavaScript performance optimization.

By understanding the differences between these approaches, developers can make informed decisions when writing their own code or choosing from available libraries and built-in methods.

Related benchmarks:

Lodash "unionWith" "unionBy" and isEqual (version: 0)

Comparing performance of: unionWith vs unionBy

Created: 3 years ago by: Guest

Jump to the latest result

unionWith

unionBy

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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