Benchmark: set.has vs. array.includes vs array.indexOf (string values) - longer

Script Preparation code:

var a = [
  'height',
  'width',
  'maxHeight',
  'maxWidth',
  'maxHeight',
  'minWidth',
  'color',
  'bg',
  'backgroundColor',
  'opacity',
  'm',
  'mt',
  'mb',
  'mr',
  'mr',
  'mx',
  'my',
  'p',
  'pt',
  'pb',
  'pr',
  'pl',
  'px',
  'py',
  'border',
  'boxShadow',
  'flex',
  'verticalAlign',
  'textAlign',
  'overflow',
  'display',
  'cursor',
  '1height',
'1width',
'1maxHeight',
'1maxWidth',
'1maxHeight',
'1minWidth',
'1color',
'1bg',
'1backgroundColor',
'1opacity',
'1m',
'1mt',
'1mb',
'1mr',
'1mr',
'1mx',
'1my',
'1p',
'1pt',
'1pb',
'1pr',
'1pl',
'1px',
'1py',
'1border',
'1boxShadow',
'1flex',
'1verticalAlign',
'1textAlign',
'1overflow',
'1display',
'1cursor',
'2height',
'2width',
'2maxHeight',
'2maxWidth',
'2maxHeight',
'2minWidth',
'2color',
'2bg',
'2backgroundColor',
'2opacity',
'2m',
'2mt',
'2mb',
'2mr',
'2mr',
'2mx',
'2my',
'2p',
'2pt',
'2pb',
'2pr',
'2pl',
'2px',
'2py',
'2border',
'2boxShadow',
'2flex',
'2verticalAlign',
'2textAlign',
'2overflow',
'2display',
'2cursor',
'3height',
'3width',
'3maxHeight',
'3maxWidth',
'3maxHeight',
'3minWidth',
'3color',
'3bg',
'3backgroundColor',
'3opacity',
'3m',
'3mt',
'3mb',
'3mr',
'3mr',
'3mx',
'3my',
'3p',
'3pt',
'3pb',
'3pr',
'3pl',
'3px',
'3py',
'3border',
'3boxShadow',
'3flex',
'3verticalAlign',
'3textAlign',
'3overflow',
'3display',
'3cursor'

  
];

var count = 120;
a = a.slice(0, count);

var b = new Set(a)

var c = Object.fromEntries(a.map(value => [value, true]));

Tests:

includes
return a.includes(a[Math.round(Math.random() * count)])
lookup
return b.has(a[Math.round(Math.random() * count)])
indexof
return a.indexOf(a[Math.round(Math.random() * count)]) >= 0
object
return c[a[Math.round(Math.random() * count)]]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
includes
lookup
indexof
object

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/136.0.7103.91 Mobile/15E148 Safari/604.1

Browser/OS: Chrome Mobile iOS 136 on iOS 18.4.1

View result in a separate tab

Test name	Executions per second
includes	8721645.0 Ops/sec
lookup	79040888.0 Ops/sec
indexof	8349534.5 Ops/sec
object	42638276.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll explain what's being tested in the provided benchmark.

**What is being tested?**

The benchmark measures the performance of three different approaches for finding an element within an array:

1. `array.includes()`
2. `Set.has()` (using a Set data structure)
3. `indexOf()` (a method that returns the index of the first occurrence of an element in the array)

**Options compared:**

The benchmark compares the performance of these three approaches on large arrays with approximately 120 elements.

**Pros and Cons:**

1. **array.includes()**: This is a simple and widely supported method for finding an element within an array. However, it has to iterate over the entire array in the worst case, which can be slow for large datasets.
2. **Set.has()**: Using a Set data structure provides faster lookup times compared to iterating over the array. Sets are implemented as hash tables, which allows for O(1) average-case time complexity for lookups.
3. **indexOf()**: This method returns the index of the first occurrence of an element in the array. It's generally slower than `includes()` because it has to iterate over the entire array and perform a linear search.

**Considerations:**

* The benchmark is sensitive to the size of the input array, as well as the specific browser and platform being used.
* The use of Sets can provide significant performance benefits for large datasets, but may require more memory allocation.
* The `indexOf()` method is generally slower than `includes()`, but can be faster when searching for a specific element in a small dataset.

**Library:**

In this benchmark, the Set data structure is used to implement the `Set.has()` approach. This library is part of the JavaScript Standard Library and provides fast lookups for elements within a set.

**Browser:**

The benchmark uses Firefox 90 as the browser, but it's likely that other browsers (e.g., Chrome) would produce similar results.

Overall, this benchmark highlights the importance of considering performance and data structure choices when implementing search algorithms in JavaScript.

Related benchmarks:

set.has vs. array.includes vs array.indexOf (string values) - longer (version: 0)

Comparing performance of: includes vs lookup vs indexof vs object

Created: 4 years ago by: Guest

Jump to the latest result

includes

lookup

indexof

object

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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