Benchmark: Set vs Filter for unique - not going back to Array

Script Preparation code:

var array = Array.from({length: 40}, () => Math.floor(Math.random() * 140));

Tests:

Set spread
const f = new Set(array)
Filter
const b = array.filter((i,index) => array.indexOf(i)=== index)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Set spread
Filter

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

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

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Set spread	2604980.5 Ops/sec
Filter	2210875.5 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

The benchmark JSON provided evaluates two different approaches for obtaining unique values from an array in JavaScript: using a `Set` and using the `filter` method combined with `indexOf`. Here’s a breakdown of the different options compared, their pros and cons, and other considerations.

### Comparison of Approaches

1. **Set Method**
   - **Benchmark Definition**: `const f = new Set(array);`
   - **Test Name**: "Set spread"
   
   **Pros**:
   - **Performance**: According to the benchmark results, using a `Set` is quite efficient. In this test, the execution rate is about 1,763,329.25 operations per second, which is reasonably fast.
   - **Simplicity**: It provides a straightforward way to create a collection of unique values, as `Set` inherently stores only unique items.
   - **Readability**: Using a `Set` can be more readable for those familiar with its properties.

**Cons**:
   - **Memory Overhead**: A `Set` may consume more memory than a simple array, especially if dealing with a large number of values.
   - **ES6 Feature**: Requires at least ECMAScript 2015 (ES6) support, which may not be present in all environments (although most modern browsers support it).

2. **Filter Method**
   - **Benchmark Definition**: `const b = array.filter((i,index) => array.indexOf(i) === index);`
   - **Test Name**: "Filter"

**Pros**:
   - **Compatibility**: This methodology is compatible with older JavaScript versions, which may be more suitable in environments that do not support ES6.
   - **Idiomatic**: The `filter` method is a common functional programming approach in JavaScript, which may appeal to developers with a background in functional programming.

**Cons**:
   - **Performance**: The benchmark shows that this method is less performant than using a `Set`, achieving about 1,919,872.5 operations per second.
   - **Inefficiency**: The use of `indexOf` within the `filter` results in potentially O(N^2) complexity when filtering the array, as it must traverse the array for each item being checked.

### Library Usage
- While there are no libraries used in this benchmark, it relies purely on native JavaScript constructs (`Set` and `Array.prototype.filter`), which are built into the language. This means there's no external library overhead, keeping it lightweight.

### Alternative Considerations
Besides the two approaches tested, there are other alternatives for obtaining unique values from an array in JavaScript:

- **Using `reduce` Method**:
  ```javascript
  const unique = array.reduce((acc, current) => {
      if (!acc.includes(current)) {
          acc.push(current);
      }
      return acc;
  }, []);
  ```
  This would have a similar performance issue as the `filter` method, making it potentially inefficient for large arrays.

- **Using `forEach`**:
  Another approach could be to use `forEach` to manually accumulate unique values over time in a new array, maintaining unique values with checks. This also tends to be less efficient.

- **Sort and Deduplicate**:
  Sort the array first, then run a loop to remove duplicates. This may add complexity in terms of handling the sorting operation.

In conclusion, the benchmark clearly indicates that using a `Set` is likely to be the better performing option for obtaining unique values from an array in JavaScript. It balances performance, readability, and simplicity, making it a preferred choice in modern JavaScript development. However, the `filter` method might still be used for its compatibility with older codebases where ES6 features are not available.

Related benchmarks:

Set vs Filter for unique - not going back to Array (version: 1)

Comparing performance of: Set spread vs Filter

Created: 2 months ago by: Guest

Jump to the latest result

Set spread

Filter

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):