Benchmark: set.has vs. array.includes vs array.indexOf (object values)

Script Preparation code:

var a = [
  { prop: 'height', },
  { prop: 'width', },
  { prop: 'maxHedight', },
  { prop: 'maxWidth', },
  { prop: 'maxHeight', },
  { prop: 'minWidth', },
  { prop: 'color', },
  { prop: 'bg', },
  { prop: 'backgroundColor', },
  { prop: 'opacity', },
  { prop: 'm', },
  { prop: 'mt', },
  { prop: 'mb', },
  { prop: 'mr', },
  { prop: 'mr', },
  { prop: 'mx', },
  { prop: 'my', },
  { prop: 'p', },
  { prop: 'pt', },
  { prop: 'pb', },
  { prop: 'pr', },
  { prop: 'pl', },
  { prop: 'px', },
  { prop: 'py', },
  { prop: 'border', },
  { prop: 'boxShadow', },
  { prop: 'flex', },
  { prop: 'verticalAlign', },
  { prop: 'textAlign', },
  { prop: 'overflow', },
  { prop: 'display', },
  { prop: 'cursor' },
];
var b = new Set(a)
var x = a[Math.floor(a.length / 2)];

Tests:

includes
return a.includes(x)
lookup
return b.has(x)
indexof
return a.indexOf(x) >= 0

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
includes
lookup
indexof

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 141 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
includes	91180480.0 Ops/sec
lookup	233435280.0 Ops/sec
indexof	93063744.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark provided tests the performance of three different methods for checking the existence of an object within a collection. Specifically, it compares the following approaches:

1. **Array.prototype.includes()** - This method checks if a given value exists in an array and returns a boolean value (`true` or `false`). It is part of ECMAScript 2016 (ES7) and offers a more semantic way to check for existence compared to older methods like `indexOf`.

2. **Set.prototype.has()** - This method checks if a particular value exists in a `Set` collection. Sets are introduced in ES6 (ECMAScript 2015) and are designed to hold unique values, which makes them particularly efficient for lookups, as they avoid the duplicates inherent in arrays.

3. **Array.prototype.indexOf()** - This method returns the index of the first occurrence of a specified value in an array, or `-1` if it is not found. It's an older method that can be used to determine existence by checking if the result is greater than or equal to zero.

### Pros/Cons of Each Approach

- **Array.prototype.includes()**
  - **Pros**:
    - Readable and intuitive for checking existence.
    - Does not require handling of the index, just needs to know if it exists.
  - **Cons**:
    - Performance may not be optimal for large arrays compared to the `Set`.

- **Set.prototype.has()**
  - **Pros**:
    - Generally faster lookup times for large data sets due to the underlying implementation of Sets (typically uses hash tables).
    - Avoids duplicate values, making it efficient for scenarios where unique values are necessary.
  - **Cons**:
    - Requires initialization of a Set, which adds initial setup overhead.
    - Not suitable when duplicate values are expected.

- **Array.prototype.indexOf()**
  - **Pros**:
    - Available in all JavaScript environments since very early specifications.
    - Can return the index of the found item, useful when the position is needed.
  - **Cons**:
    - Less intuitive than `includes()` for checking existence since developers need to interpret the index result.
    - Performance can degrade with larger arrays due to its linear search algorithm.

### Additional Considerations
- **Data Structure Choice**: The choice between these methods can depend on the nature of the dataset. If the existence check is frequent and involves large data sets, using a `Set` is generally recommended for better performance.
- **Value Type**: The type of values in the objects may also affect performance, as the comparison algorithm can differ based on whether the values are primitive types or objects. In this specific benchmark, the existence of object references is being tested.
  
### Alternatives
- **Using a Object-based Lookup**: If unique keys are used, a plain JavaScript object can be employed for quick existence checks, where the property name is the value being checked.
- **WeakSet**: In scenarios where you want to manage memory better, `WeakSet` can be applied for object references, but it doesn’t provide a `has` method that can easily check values like strong `Set.`

Overall, the benchmark highlights performance differences for these methods while emphasizing practical scenarios for different sized datasets and usage patterns in JavaScript development.

Related benchmarks:

set.has vs. array.includes vs array.indexOf (object values) (version: 1)

Comparing performance of: includes vs lookup vs indexof

Created: one year ago by: Guest

Jump to the latest result

includes

lookup

indexof

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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