Benchmark: includes vs. find

Script Preparation code:

var props = [];
var ignore = [];
for (var i = 0; i < 255; i++) {
  props.push(i.toString());
  if (i % 5 === 0) {
   ignore.push(i.toString()); // something we'll find
   ignore.push((i + 300).toString()); // something we don't find
  }
}

Tests:

Array.includes
var tempResult = props.filter(prop => !ignore.includes(prop));
Array.find
var tempResult = props.filter(prop => ignore.find(sub => prop === sub) === undefined);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.includes
Array.find

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

The provided JSON represents a benchmark that tests two approaches to achieve similar results: using `includes` method and using `find` method with a callback function. The goal is to compare the performance of these two methods.

**Includes Method**

The `includes` method is used in the first test case:
```javascript
var tempResult = props.filter(prop => !ignore.includes(prop));
```
This approach uses the `filter` method and checks if an element exists in the `ignore` array using the `includes` method. The `!` operator negates the result, so that elements not present in `ignore` are kept.

**Find Method**

The second test case uses the `find` method with a callback function:
```javascript
var tempResult = props.filter(prop => ignore.find(sub => prop === sub) === undefined);
```
This approach also uses the `filter` method, but instead of checking if an element exists in `ignore`, it checks if the result of searching for that element using `find` is `undefined`. If the element is not found, it's included in the result.

**Options Compared**

The two approaches are compared in terms of performance, specifically:

* Which approach performs better?
* Are there any differences in performance between different browsers or devices?

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

**Includes Method:**

Pros:

* Simple to understand and implement
* Can be more efficient for large arrays since it uses a linear search algorithm

Cons:

* May have slower performance due to the use of `includes`, which is an O(n) operation

**Find Method:**

Pros:

* Can be faster for small arrays or when exact matches are necessary
* Avoids the overhead of `includes` method

Cons:

* May have slower performance for large arrays since it uses a more complex search algorithm
* Requires more memory to store the callback function and its arguments

**Library Used**

In both test cases, the `filter` method is used, which is a built-in JavaScript method. However, if you look closely at the second test case, there's also an inner callback function that uses the `find` method with a callback function as an argument. This is not a separate library but rather a feature of the JavaScript language itself.

**Special JS Feature or Syntax**

There isn't any special JavaScript feature or syntax used in these benchmark test cases.

**Other Considerations**

When interpreting the results, consider the following:

* The `ExecutionsPerSecond` value represents how many times each approach executes for every second.
* Different browsers and devices may have varying performance due to hardware, software, and other factors.
* This benchmark is designed to test specific use cases, but real-world scenarios might require additional considerations.

**Alternative Approaches**

If you're interested in exploring alternative approaches or optimization techniques:

1. **Use `indexOf` method**: Instead of using `includes`, you can use the `indexOf` method, which returns the index of a specified element if it exists, and -1 otherwise.
2. **Use `reduce` method**: You can use the `reduce` method to filter elements instead of `filter`. This approach might be more efficient for large arrays.
3. **Cache results**: If you need to perform this operation frequently, consider caching the result or using a faster data structure like a Set.

Keep in mind that optimization techniques should be based on your specific use case and requirements.

Related benchmarks:

includes vs. find (version: 0)

Comparing performance of: Array.includes vs Array.find

Created: 3 years ago by: Guest

Jump to the latest result

Array.includes

Array.find

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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