Benchmark: native find vs lodash _.find vs map+indexOf vs findIndex

HTML Preparation code:

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

Script Preparation code:

var users = [
  { user: 'joey',  age: 32, id: 0 },
]

for(var i=1; i < 10000; i++) {
  users.push({ user: 'ross', age: 41, id: i, managerId: i-1 });
}

var usersExistingMap = new Map();
users.map(u => {
	usersExistingMap.set(u.id, u);
});

Tests:

array find
// Native users.find(function (o) { return o.id = 41; })
_.find
_.find(users, function (o) { return o.id = 41; })
map+indexOf
users.map(o => o.id).indexOf(41)
findIndex
users.findIndex(o => o.id === 41)
new Map object
let usersMap = new Map(); users.map(u => { usersMap.set(u.id, u); }); usersMap.has(41);
already existing Map object
usersExistingMap.has(41);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
array find
_.find
map+indexOf
findIndex
new Map object
already existing Map object

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36

Browser/OS: Chrome 112 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
array find	29998740.0 Ops/sec
_.find	9160615.0 Ops/sec
map+indexOf	36682.9 Ops/sec
findIndex	29029084.0 Ops/sec
new Map object	2506.7 Ops/sec
already existing Map object	20618666.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a JavaScript benchmark test on the MeasureThat.net website. The test compares the performance of different approaches to find an element in an array: using the native `find()` method, Lodash's `_find()` function, `map` + `indexOf`, and creating a new Map object with `findIndex`.

**What is being tested**

The test is comparing the performance of six different approaches:

1. Native `find()`: using the built-in `find()` method to find an element in the array.
2. Lodash's `_find()`: using the Lodash library to find an element in the array with a custom callback function.
3. `map` + `indexOf`: using the `map()` method to create a new array of indices and then searching for the target index using `indexOf()`.
4. `findIndex`: using the built-in `findIndex()` method to find the index of the first element that satisfies a condition.
5. Creating a new Map object: creating a new Map object and setting an entry with the value being searched for.
6. Using an existing Map object: searching for the value in an already created Map object.

**Options comparison**

The pros and cons of each approach are:

1. Native `find()`:
	* Pros: native implementation, likely optimized for performance.
	* Cons: may not be available in older browsers or environments with limited JavaScript support.
2. Lodash's `_find()`:
	* Pros: widely supported library, customizable callback function.
	* Cons: adds additional overhead due to the use of a separate library.
3. `map` + `indexOf`:
	* Pros: can be used in situations where native `find()` is not available or not suitable.
	* Cons: creates an unnecessary intermediate array and may be slower than native `find()`.
4. `findIndex`:
	* Pros: built-in implementation, efficient for finding the index of a value.
	* Cons: only works on arrays with at least one element.
5. Creating a new Map object:
	* Pros: can be used in situations where native `find()` is not available or not suitable.
	* Cons: creates an unnecessary object and may be slower than native `find()`.
6. Using an existing Map object:
	* Pros: uses an already created object, potentially faster than creating a new one.
	* Cons: requires the Map object to have been previously created.

**Library usage**

Lodash's `_find()` function is used in the test case with the following code:
```javascript
_.find(users, function (o) { return o.id = 41; })
```
The purpose of Lodash is to provide a set of reusable functions for common tasks, such as array manipulation and string manipulation. In this case, `_find()` is used to find an element in the `users` array that matches the condition specified by the callback function.

**Special JS feature or syntax**

There are no special JavaScript features or syntax used in the test cases.

**Other alternatives**

Some alternative approaches for finding an element in an array include:

1. Using a for loop: `for (var i = 0; i < users.length; i++) { if (users[i].id === 41) { ... } }`
2. Using `Array.prototype.some()`: `if (users.some(function (o) { return o.id === 41; })) { ... }`
3. Using `Array.prototype.reduce()`: `users.reduce(function (acc, current) { if (current.id === 41) { acc = current; } }, null)`

However, these approaches may not be as efficient or convenient to use as the methods tested in this benchmark.

Related benchmarks:

native find vs lodash _.find vs map+indexOf vs findIndex (version: 0)

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

Comparing performance of: array find vs _.find vs map+indexOf vs findIndex vs new Map object vs already existing Map object

Created: 3 years ago by: Guest

Jump to the latest result

array find

_.find

map+indexOf

findIndex

new Map object

already existing Map object

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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