Benchmark: array filter vs _.filter

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 filter
var a = ['hello', 'a', 'bc']; var b = a.filter(item => item == 'a');
_.filter
var a = ['hello', 'a', 'bc']; var b = _.filter(a, item => item == 'a');

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

array filter

67.5M/s

_.filter

10.6M/s

Fastest: array filter (6.4x faster)

View exact numbers

✓ array filter: 67,485,808 ops/sec
• _.filter: 10,614,138 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
array filter
_.filter

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

Browser/OS: Chrome 136 on Mac OS X 10.15.7

View result in a separate tab

array filter

102.6M/s

_.filter

37.0M/s

View exact numbers

Test name	Executions per second
✓ array filter	102,620,648 Ops/sec
_.filter	37,007,640 Ops/sec

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.

**Benchmark Definition**

The benchmark definition represents two test cases that compare the performance of built-in JavaScript array filtering (`Array.prototype.filter()`) with Lodash's `_.filter()` function. The script preparation code is empty, and the HTML preparation code includes a reference to Lodash.js.

**What is tested?**

In each test case:

1. An example array `a` is created with three elements.
2. A filtering condition is applied to filter out specific elements from the array.
3. Two separate functions are called:
	* Built-in JavaScript: `Array.prototype.filter()`
	* Lodash: `_.filter()`

The test measures which function executes faster and produces the same result.

**Options compared**

We have two main options:

1. **Built-in JavaScript Array.prototype.filter()**: This is a native JavaScript function that filters an array based on a provided condition.
2. **Lodash _.filter()**: This is a utility function from the Lodash library that provides a more concise and expressive way to filter arrays.

**Pros and Cons of each approach**

**Built-in JavaScript `Array.prototype.filter()`**

Pros:

* Lightweight: It's a built-in function, so it has minimal overhead.
* Fast: Native code execution typically results in better performance.

Cons:

* Less readable: The filtering logic can be more verbose and harder to understand for non-JavaScript developers.
* Less maintainable: If the filtering condition changes, you'll need to update both the built-in function call and the original array code.

**Lodash `_.filter()`**

Pros:

* More concise: It provides a more readable and expressive way to filter arrays.
* Easier maintenance: The filtering logic is encapsulated in the Lodash library, making it easier to maintain.

Cons:

* Heavier: As an external library, it adds overhead due to its size and the need for another import.

**Library - Lodash**

Lodash is a popular JavaScript utility library that provides a collection of functional programming helpers. In this benchmark, `_.filter()` is used to filter arrays, providing a more concise way to achieve the same result as the built-in JavaScript function.

**Special JS feature or syntax**

There are no specific JavaScript features or syntaxes mentioned in these test cases.

**Other alternatives**

If you prefer not to use Lodash's `_.filter()`, you can implement your own filtering logic using a traditional loop or recursion. Here's an example:

```javascript
// Without Lodash
function filterArray(arr, predicate) {
  const result = [];
  for (const item of arr) {
    if (predicate(item)) {
      result.push(item);
    }
  }
  return result;
}
```

You can then use this function in your benchmark instead of `_.filter()`.

In summary, MeasureThat.net's benchmark on array filtering compares the performance of built-in JavaScript `Array.prototype.filter()` with Lodash's `_.filter()`. The choice between these two approaches depends on trade-offs between code readability, maintainability, and overhead.

array filter vs _.filter (version: 0) Benchmark.js

Comparing performance of: `array filter vs _.filter`

Created: 6 years ago by: Guest

Go to the latest result

array filter

_.filter

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

array filter vs _.filter (version: 0) Benchmark.js

Comparing performance of: array filter vs _.filter

Created: 6 years ago by: Guest

Go to the latest result

array filter

_.filter

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `array filter vs _.filter`