Benchmark: underscore _.uniq vs [...new Set()]

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.7/underscore-min.js'></script>

Script Preparation code:


const arr = new Array(100_000).fill(1).fill(2, 50_000)

Tests:

_.uniq(arr);
return _.uniq(arr);
[...new Set(arr)]
return [...new Set(arr)]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
_.uniq(arr);
[...new Set(arr)]

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Linux

View result in a separate tab

_.uniq(arr);

1K/s

[...new Set(arr)]

1K/s

View exact numbers

Test name	Executions per second
✓ _.uniq(arr);	1,347 Ops/sec
[...new Set(arr)]	1,018 Ops/sec

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

LLMs can make mistakes. Check important info.

This benchmark compares two methods for removing duplicates from an array in JavaScript: the Underscore.js library's `_.uniq()` function and the modern JavaScript syntax using the `Set` constructor and the spread operator.

### Options Compared

1. **Underscore.js `_.uniq(arr)`**
   - This method belongs to the Underscore.js library, which is a utility library that provides a range of functional programming helpers for JavaScript. `_.uniq()` is specifically designed to iterate through an array and return a new array with duplicate entries removed.
   
2. **Spread operator with `Set`: `[...new Set(arr)]`**
   - This native JavaScript approach creates a `Set` from the input array `arr`. Since a Set inherently only holds unique values, it effectively removes duplicates. The spread operator (`...`) is then used to convert the Set back into an array.

### Pros and Cons

#### Underscore.js `_.uniq()`
- **Pros:**
  - Works in older JavaScript environments that may not support ES6 features such as `Set` and the spread operator.
  - May provide additional functionalities, such as allowing an optional iterator for determining uniqueness based on specific criteria.
- **Cons:**
  - Performance can be slower (as seen in the benchmark results) compared to the native implementation.
  - Adds a dependency on an external library, which could increase the bundle size and loading time in web applications.

#### Spread operator with `Set`
- **Pros:**
  - Generally faster performance, as shown in the benchmark results. In this case, `_.uniq()` achieved 4166.17 executions per second, whereas `[...new Set(arr)]` had 2162.88.
  - Fully native implementation, no external dependencies, which leads to cleaner code and smaller bundle sizes.
  - Easier to read and understand for developers familiar with ES6+ syntax.
- **Cons:**
  - Requires a modern JavaScript environment that supports ES6 features, which may not be available in older browsers or environments.
  - Limited flexibility compared to Underscore in handling more complex uniqueness conditions.

### Considerations

- **Performance**: It's notable that the benchmark results indicate that `_.uniq()` is faster in this case. However, performance can vary depending on the input data, size of the array, and specific implementation on various JavaScript engines.
  
- **Dependencies**: Using a utility library increases your project's dependencies. For new projects, developers might prefer native solutions to avoid unnecessary complexity.

- **Browser Support**: If targeting a wide range of environments and older browsers, using `_.uniq()` could be beneficial, while for modern applications, the spread with `Set` is typically preferred.

### Alternatives
Aside from the two approaches considered in this benchmark, there are other methods to remove duplicates in JavaScript:

1. **Filter Method**: You can use the `Array.prototype.filter()` method together with `indexOf()` to create a new array without duplicates.
   ```javascript
   const uniqueArray = arr.filter((item, index) => arr.indexOf(item) === index);
   ```

2. **Object Keys**: Using an object to keep track of duplicates:
   ```javascript
   const uniqueArray = Object.keys(arr.reduce((acc, item) => {
       acc[item] = true; 
       return acc;
   }, {}));
   ```

3. **Classic For Loop / Nested Loop**: A classic approach using loops, though this method is generally less efficient due to O(n^2) complexity.

Ultimately, while choosing an approach, developers should weigh performance, readability, and maintainability based on their specific use cases.

underscore _.uniq vs [...new Set()] (version: 1)

Comparing performance of: `_.uniq(arr); vs [...new Set(arr)]`

Created: one year ago by: Guest

Go to the latest result

_.uniq(arr);

[...new Set(arr)]

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

underscore _.uniq vs [...new Set()] (version: 1)

Comparing performance of: _.uniq(arr); vs [...new Set(arr)]

Created: one year ago by: Guest

Go to the latest result

_.uniq(arr);

[...new Set(arr)]

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `_.uniq(arr); vs [...new Set(arr)]`