Benchmark: reverse vs lodash vs native

HTML Preparation code:

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

Script Preparation code:

var users = [
  { 'user': 'joey',  'age': 32 },
  { 'user': 'ross',    'age': 41 },
  { 'user': 'chandler', 'age': 39 }
]

Tests:

array find
// Native users.slice().reverse().find(function (o) { return o.age < 40; })
_.findLast
_.findLast(users, function (o) { return o.age < 40; })
native
users.findLast(function (o) { return o.age < 40; })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
array find
_.findLast
native

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Definition**

The benchmark is designed to compare the performance of three different approaches:

1. **Native**: Using the traditional `slice()` and `find()` methods in native JavaScript.
2. **Lodash**: Utilizing the `_` library, specifically its `findLast()` function, which is built on top of the native JavaScript methods.
3. **Reverse vs Lodash vs Native**: This option compares the performance of using the new ES6 spread operator (`[...]`) to create a reversed copy of an array.

**Script Preparation Code**

The script preparation code includes:

* An array of objects `users` containing three users with different ages.
* The HTML code that loads the required Lodash libraries: `lodash.core.js` and `lodash.min.js`.

**Individual Test Cases**

There are three test cases, each defining a different benchmark:

1. **array find**: Using the `slice()` method to reverse the array and then finding the first element where `age < 40`.
2. **_.findLast`: Utilizing the Lodash library's `_findLast()` function to find the last element in the reversed array where `age < 40`.
3. **native**: Using the traditional `find()` method with a reversed array created using `[...]`.

**Pros and Cons of Each Approach**

1. **Native (slice() and find())**:
	* Pros: Simple, lightweight, and widely supported.
	* Cons: May have performance overhead due to the creation of a new reversed copy of the array.
2. **Lodash (.findLast())**:
	* Pros: Encapsulates native JavaScript methods, providing a consistent API and potentially better performance due to caching and memoization.
	* Cons: Adds an external dependency (the Lodash library) that may not be included in every environment.
3. **Reverse vs Lodash vs Native**:
	* Pros: Allows for direct comparison of the new ES6 spread operator's performance without relying on existing libraries.
	* Cons: May require additional setup and testing to ensure accurate results.

**Library Usage**

The benchmark uses the `lodash` library, specifically its `_findLast()` function. Lodash is a popular utility library that provides a consistent API for various tasks, including array manipulation. The `_.findLast()` function is designed to find the last element in an array that satisfies a given condition, which is used in this benchmark.

**Special JS Features or Syntax**

The new ES6 spread operator (`[...]`) is not explicitly tested in this benchmark, but its performance can be evaluated by running additional tests with the `Reverse` option. This feature allows for creating a reversed copy of an array without modifying the original.

**Other Alternatives**

If you're interested in exploring other approaches or variations, consider adding more test cases, such as:

* Using `Array.prototype.reverse()` instead of `slice()`
* Implementing your own reverse-and-find logic
* Testing with larger arrays or more complex data structures

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/115.0.0.0 Safari/537.36

Browser/OS: Chrome 115 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
array find	24602518.0 Ops/sec
_.findLast	7617463.5 Ops/sec
native	23833682.0 Ops/sec

Related benchmarks:

reverse vs lodash vs native (version: 0)

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

Comparing performance of: array find vs _.findLast vs native

Created: one year ago by: Guest

Jump to the latest result

array find

_.findLast

native

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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