Benchmark: === vs shorthand function

HTML Preparation code:

<a id='foo' href='#' />

Script Preparation code:

var type = Object.prototype.toString.call(document.querySelector("#foo")).slice(8, -1),
    arrTypes = ["HTMLIFrameElement", "HTMLDocument", "HTMLHeadingElement", "HTMLDivElement", "HTMLSpanElement",
                "ShadowRoot", "String", "Array", "Function", "HTMLAnchorElement"],
    oneOf = (v, ...a) => (a.some(e => v === e));

Tests:

multiple equality operators
type === "HTMLIFrameElement" || type === "HTMLDocument" || type === "HTMLHeadingElement" || type === "HTMLDivElement" || type === "HTMLSpanElement" || type === "ShadowRoot" || type === "String" || type === "Array" || type === "Function" || type === "HTMLAnchorElement";
shorthand function
oneOf(type, "HTMLIFrameElement", "HTMLDocument", "HTMLHeadingElement", "HTMLDivElement", "HTMLSpanElement", "ShadowRoot", "String", "Array", "Function", "HTMLAnchorElement");
multiple equality operators with an object
arrTypes[9] === "HTMLIFrameElement" || arrTypes[9] === "HTMLDocument" || arrTypes[9] === "HTMLHeadingElement" || arrTypes[9] === "HTMLDivElement" || arrTypes[9] === "HTMLSpanElement" || arrTypes[9] === "ShadowRoot" || arrTypes[9] === "String" || arrTypes[9] === "Array" || arrTypes[9] === "Function" || arrTypes[9] === "HTMLAnchorElement";
shorthand function with an object
oneOf(arrTypes[9], "HTMLIFrameElement", "HTMLDocument", "HTMLHeadingElement", "HTMLDivElement", "HTMLSpanElement", "ShadowRoot", "String", "Array", "Function", "HTMLAnchorElement");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
multiple equality operators
shorthand function
multiple equality operators with an object
shorthand function with an object

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
multiple equality operators	1290090.5 Ops/sec
shorthand function	3353462.0 Ops/sec
multiple equality operators with an object	1402982.4 Ops/sec
shorthand function with an object	5441215.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what is being tested.

**Benchmark Definition**

The benchmark compares two approaches to check if a value belongs to a given array:

1. Multiple equality operators (`===`): This approach uses multiple `===` operators to individually compare each element of the array with the value.
2. Shorthand function: This approach uses a shorthand function (`oneOf`) that takes an array and individual values as arguments.

**Options Compared**

The benchmark is comparing the performance of these two approaches:

* Multiple equality operators:
	+ Using individual `===` operators to compare each element of the array with the value.
* Shorthand function:
	+ Using a custom `oneOf` function that takes an array and individual values as arguments.

**Pros and Cons**

Here are some pros and cons of each approach:

Multiple Equality Operators:

Pros:

* Simple and easy to understand
* Can be easily optimized for specific use cases

Cons:

* Requires multiple comparisons, which can lead to slower performance
* May not be suitable for large arrays or complex comparisons

Shorthand Function:

Pros:

* Efficiently checks multiple values against an array using a single function call
* Can be optimized for performance and caching

Cons:

* May require additional setup and complexity to implement correctly
* Less intuitive than traditional equality operators

**Library Used**

The `oneOf` function is a custom implementation used in the benchmark. Its purpose is to check if any element of an array matches a given value.

**Special JS Feature or Syntax**

There doesn't seem to be any special JavaScript features or syntax being tested here, as both approaches use standard language constructs (equality operators and functions).

**Other Alternatives**

If you needed to implement this benchmark yourself, some alternative approaches could include:

1. Using `some()` method: This would allow using a single loop to check if any element of the array matches the value.
2. Implementing a custom `in` operator: If you wanted to optimize for specific use cases, you could implement a custom `in` operator that uses bit manipulation or other techniques to efficiently check membership.

**Benchmark Preparation and Execution**

The benchmark preparation code generates an HTML document with an element (#foo) and extracts the type of the element using `Object.prototype.toString.call()`. The execution code then runs each test case multiple times (not shown in this snippet), measuring the time it takes for each approach to complete.

Note that this is a simplified explanation, and there are many ways to optimize and implement these approaches further.

Related benchmarks:

=== vs shorthand function (version: 0)

multiple equality operators vs shorthand function

Comparing performance of: multiple equality operators vs shorthand function vs multiple equality operators with an object vs shorthand function with an object

Created: 2 years ago by: Registered User

Jump to the latest result

multiple equality operators

shorthand function

multiple equality operators with an object

shorthand function with an object

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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