Benchmark: get uniq values js

HTML Preparation code:

<script>https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.core.js</script>

Script Preparation code:

var data = [{a: 1}, {a: 2}, {a: 3}, {a: 4}, {a: 5}, {a: 6}, {a: 7}, {a: 8}, {a: 1}];

Tests:

js
data.filter((v, i, a) => a.findIndex(t => t.a === v.a) === i)
lodash
_.uniqBy(data, 'a');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
js
lodash

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated 27 days ago):

LLMs can make mistakes. Check important info.

Let's dive into what's being tested here.

**Benchmark Name:** "get uniq values js" (a.k.a. getting unique values in JavaScript)

**Description:** This benchmark compares two approaches to get unique values from an array: one using vanilla JavaScript and the other using the `_.uniqBy` function from Lodash library.

**Test Case 1: Vanilla JS**

The first test case uses the following code:
```javascript
data.filter((v, i, a) => a.findIndex(t => t.a === v.a) === i)
```
Here's what's happening:

* We have an array `data` containing objects with an "a" property.
* The `filter()` method is used to create a new array with only the unique values from `data`.
* The callback function passed to `filter()` uses `findIndex()` to search for the index of the first occurrence of each value in the original array. If it's not found (i.e., the value is unique), `findIndex()` returns `-1`, and we include that element in the new array.

**Test Case 2: Lodash**

The second test case uses the following code:
```javascript
_.uniqBy(data, 'a');
```
Here's what's happening:

* We use the `_.uniqBy` function from Lodash to get an array of unique values from `data`.
* The first argument is the input array `data`, and the second argument `'a'` specifies that we want to consider only the "a" property when determining uniqueness.

**Benchmark Results**

The latest benchmark results show the execution time (Executions Per Second) for both test cases on a Chrome Mobile 94 browser:

* Vanilla JS: approximately 1.62 million executions per second
* Lodash: approximately 447,000 executions per second

These results indicate that the vanilla JavaScript implementation is significantly faster than the Lodash version.

**Pros and Cons**

**Vanilla JS:**

Pros:

* Faster execution time (approx. 3.6x faster)
* No external library dependencies

Cons:

* Requires knowledge of JavaScript's `filter()` and `findIndex()` methods
* May not be as readable or maintainable as Lodash code, especially for non-JS experts

**Lodash:**

Pros:

* Easy to read and understand, even for non-JS experts
* Simplifies the uniqueness calculation using a dedicated function

Cons:

* Slower execution time (approx. 3.6x slower)
* Requires including an external library (Lodash)

**Other Alternatives**

If you're not using Lodash or want alternative approaches, consider these options:

1. **`Set`**: Create a `Set` object from the array and then convert it back to an array using the spread operator (`...`). This approach is concise and efficient.
```javascript
const uniqueValues = [...new Set(data.map(x => x.a))];
```
2. **`.map()` and `.reduce()`:**

Use `map()` to create a new array with the same elements as the original, but then use `reduce()` to eliminate duplicates:
```javascript
data.map((x) => ({ a: x.a })).reduce((acc, current) => {
  if (!acc.find(t => t.a === current.a)) acc.push(current);
  return acc;
}, []);
```
These alternatives have their own trade-offs and may not be as performant or readable as the original Lodash example. However, they demonstrate different approaches to solving the same problem.

**Library:**

Lodash is a popular JavaScript library that provides utility functions for common tasks like data manipulation, string handling, and more. The `_.uniqBy` function is part of the "Arrays" module in Lodash.

That's it! I hope this explanation helps you understand what's being tested here and provides valuable insights into different approaches to solving a common JavaScript problem.

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; SM-A750GN) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.61 Mobile Safari/537.36

Browser/OS: Chrome Mobile 94 on Android

View result in a separate tab

Test name	Executions per second
js	1625066.5 Ops/sec
lodash	447325.1 Ops/sec

Related benchmarks:

get uniq values js (version: 0)

lodash uniqBy vs vanilla js

Comparing performance of: js vs lodash

Created: 3 years ago by: Guest

Jump to the latest result

js

lodash

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated 27 days ago):