Benchmark: array find vs _.find

HTML Preparation code:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.core.js"></script>

Tests:

array find
var a = ['hello', 'a', 'bc']; var b = a.find(item => item === 'bc');
_.find
var a = ['hello', 'a', 'bc']; var b = _.find(a, item => item === 'bc');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
array find
_.find

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Linux

View result in a separate tab

Test name	Executions per second
array find	73097848.0 Ops/sec
_.find	21406964.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Definition**

The benchmark compares two approaches to achieve the same goal:

1. The traditional ES6 spread operator (`...`) used with the `Array.prototype.find()` method.
2. The older approach using the `concat()` method in combination with the `Array.prototype.includes()` method.

**Options Compared**

* **ES6 Spread Operator (new syntax)**: uses the new spread operator to create a copy of the array, and then calls `find()` on that copy.
	+ Pros:
		- More concise and readable
		- Often faster due to less overhead from creating an intermediate array
	+ Cons:
		- Not all browsers support the spread operator (Chrome 127 is one such browser)
		- May not be as efficient for very large arrays, since it creates a copy of the entire array
* **`concat()` method with `includes()`**: uses the `concat()` method to create a new array and then calls `includes()` on that array to find the element.
	+ Pros:
		- More widely supported across browsers, including older ones like Chrome 127
		- May be more efficient for very large arrays since it only creates an intermediate array without copying the entire original array
	+ Cons:
		- Less concise and less readable than the spread operator approach

**Library Used**

* `lodash`: a popular JavaScript utility library that provides functions like `find()`, which is used in one of the test cases.

**Special JS Feature/Syntax**

None mentioned in this benchmark. However, it's worth noting that the spread operator was introduced in ES6 and has become a standard feature in modern JavaScript.

**Other Alternatives**

There are other ways to achieve the same goal without using `concat()` or the spread operator:

* Using `Array.prototype.indexOf()`: finds the index of the element in the array.
* Using a custom loop: iterates over the array manually using an index variable.
* Using `Array.prototype.includes()`: checks if the element is present in the array, but returns the entire array as an argument.

However, these alternatives are less concise and may not be as efficient as the two options being compared in this benchmark.

**Benchmark Preparation Code**

The preparation code includes a script tag that loads the `lodash` library, which is used in one of the test cases.

I hope this explanation helps you understand what's being tested in this benchmark!

Related benchmarks:

array find vs _.find (version: 0)

Compare the new ES6 spread operator with the traditional concat() method

Comparing performance of: array find vs _.find

Created: 7 years ago by: Registered User

Jump to the latest result

array find

_.find

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):