Benchmark: JQuery and Native JS: check exist element in array

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js'></script>

Script Preparation code:

var array = [];
var index = 0;
while (index < 1000) {
  array.push(index++);
}

Tests:

JQuery inArray
let isExistElement = $.inArray(500, array) >= 0;
indexOf
let isExistElement = array.indexOf(500) >= 0;
includes
let isExistElement = array.includes(500);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
JQuery inArray
indexOf
includes

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 113 on Windows

View result in a separate tab

Test name	Executions per second
JQuery inArray	4467216.5 Ops/sec
indexOf	8868516.0 Ops/sec
includes	21355754.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript benchmarks and explain what's happening on the provided JSON.

**Benchmark Definition**

The benchmark is designed to compare three approaches for checking if an element exists in an array:

1. Using jQuery's `$.inArray()` method
2. Using the native JavaScript `indexOf()` method
3. Using the native JavaScript `includes()` method

The benchmark aims to find the most efficient approach for this specific task.

**Options Compared**

Here are the options being compared, along with their pros and cons:

1. **JQuery inArray**
	* Purpose: To use jQuery's `$.inArray()` method, which is a wrapper around the native JavaScript `indexOf()` method.
	* Pros:
		+ Easy to read and write, especially for those familiar with jQuery.
		+ Can be useful if you need to work with multiple DOM elements simultaneously.
	* Cons:
		+ Adds unnecessary overhead due to the jQuery library being loaded.
		+ May not be as fast as native JavaScript methods.
2. **indexOf**
	* Purpose: To use the native JavaScript `indexOf()` method, which searches for a specific value in an array.
	* Pros:
		+ Fast and efficient, especially for large arrays.
		+ Native JavaScript implementation means no additional overhead from libraries.
	* Cons:
		+ May not be as readable or intuitive for those unfamiliar with the method.
		+ Can return -1 if the element is not found, which might require additional checks.
3. **includes**
	* Purpose: To use the native JavaScript `includes()` method, which returns a boolean indicating whether an element is present in an array.
	* Pros:
		+ Concise and readable syntax.
		+ Returns a boolean value, making it easier to handle results.
	* Cons:
		+ Introduced in ECMAScript 2019, so might not be supported in older browsers or environments.
		+ Can be slower than `indexOf()` for very large arrays.

**Library Usage**

The benchmark uses jQuery's `$.inArray()` method, which is a wrapper around the native JavaScript `indexOf()` method. This means that even though we're comparing native JavaScript methods, the presence of jQuery introduces some overhead due to the library being loaded.

**Special JS Feature or Syntax**

None of the test cases use any special JavaScript features or syntax beyond what's commonly used in modern JavaScript development.

**Other Alternatives**

If you wanted to compare additional approaches for checking if an element exists in an array, you might consider:

* Using `Array.prototype.some()` or `Array.prototype.every()`
* Implementing a custom search algorithm using bitwise operations
* Using a library like Lodash's `includes` function

Keep in mind that the performance differences between these approaches would depend on the specific use case and requirements.

The benchmark results provided show the execution times for each test case, indicating which approach is the fastest. In this case, the native JavaScript `includes()` method is the clear winner, followed closely by `indexOf()`. The jQuery `$.inArray()` method trails behind, due to its added overhead from the library being loaded.

As a developer, understanding these trade-offs and choosing the most efficient approach for your specific use case can help you write faster, more maintainable code.

Related benchmarks:

JQuery and Native JS: check exist element in array (version: 0)

Find the best approach for check exist element in array

Comparing performance of: JQuery inArray vs indexOf vs includes

Created: 4 years ago by: Registered User

Jump to the latest result

JQuery inArray

indexOf

includes

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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