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

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days 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.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:90.0) Gecko/20100101 Firefox/90.0

Browser/OS: Firefox 90 on Windows

View result in a separate tab

Test name	Executions per second
includes	1786646.4 Ops/sec
lookup	20800152.0 Ops/sec
indexof	2727882.0 Ops/sec
object	17213578.0 Ops/sec

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: 3 years ago by: Guest

Jump to the latest result

includes

lookup

indexof

object

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):