Benchmark: _.filter.length vs filter.length vs reduce.length

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

storage = [
  { data: '1', status: '0' },
  { data: '2', status: '0' },
  { data: '3', status: '0' },
  { data: '4', status: '0' },
  { data: '5', status: '0' },
  { data: '6', status: '0' },
  { data: '7', status: '1' },
];

Tests:

reduce
storage.reduce((counter, { status }) => status === '0' ? counter += 1 : counter, 0)
filter
storage.filter(item => item.status === '0').length
_.filter
_.filter(storage, item => item.status === '0').length

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce
filter
_.filter

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 122 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
reduce	13855692.0 Ops/sec
filter	12081834.0 Ops/sec
_.filter	5343038.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its various components.

**Benchmark Definition:**
The benchmark is designed to compare the performance of three different methods for filtering and reducing an array:

1. `Array.prototype.filter()` (native JavaScript method)
2. `_` (Lodash) `filter()` function
3. `Array.prototype.reduce()` (native JavaScript method)

These three functions are compared to determine which one is most efficient.

**Options Compared:**

* `Array.prototype.filter()`: This native JavaScript method filters an array and returns a new array with only the elements that pass the test implemented by the provided function.
* `_` (Lodash) `filter()`: This is a wrapper around the native `Array.prototype.filter()` method, but it adds some additional functionality and options. However, in this benchmark, only the length of the filtered array is being compared.
* `Array.prototype.reduce()`: This native JavaScript method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

**Pros and Cons:**

* `Array.prototype.filter()`:
	+ Pros: Fast, efficient, and widely supported.
	+ Cons: Can be slower for very large arrays due to the overhead of creating a new array.
* `_` (Lodash) `filter()`: 
	+ Pros: Provides additional functionality and options compared to native `Array.prototype.filter()`.
	+ Cons: Adds unnecessary complexity and may incur performance overhead.
* `Array.prototype.reduce()`:
	+ Pros: Can be more efficient for reducing an array, as it avoids creating a new array.
	+ Cons: May require more manual management of the accumulator and can be slower for very large arrays due to the additional calculations.

**Other Considerations:**

* The benchmark does not account for other factors that may affect performance, such as data distribution, cache behavior, or platform-specific optimizations.
* The `_` (Lodash) `filter()` function is used with a simple predicate, which may not accurately represent real-world usage scenarios where more complex filtering logic is required.

**Library and Syntax:**

* Lodash (`_`) is a popular JavaScript library that provides additional functionality for array manipulation, among other tasks.
* The `_` (Lodash) `filter()` function uses the same syntax as the native `Array.prototype.filter()`, but with some additional features and options.

In summary, this benchmark compares the performance of three different methods for filtering and reducing an array: the native JavaScript methods `Array.prototype.filter()` and `Array.prototype.reduce()`, and the Lodash wrapper `_` (Lodash) `filter()`. The results can help developers understand which method is most efficient for their specific use cases.

**Alternatives:**

* For simple filtering tasks, other libraries like Underscore.js or Moment.js may provide more convenient APIs.
* For reducing an array, other methods like `Array.prototype.reduce()` with a custom accumulator function or using `Array.prototype.forEach()` and accumulating the results manually may be suitable alternatives.
* In modern JavaScript, you can also use more functional programming style approaches like `Array.prototype.filter()`, `Array.prototype.map()`, and `Array.prototype.reduce()` together to achieve similar results.

Related benchmarks:

_.filter.length vs filter.length vs reduce.length (version: 0)

Comparing performance of: reduce vs filter vs _.filter

Created: 2 years ago by: Guest

Jump to the latest result

reduce

filter

_.filter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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