Benchmark: _.filter() vs [].filter()

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

Script Preparation code:

var testArray = [{
        key1: 'val1-1',
        key2: 'val2-1'
    },
    {
        key1: 'val1-2',
        key2: 'val2-2'
    },
    {
        key1: 'val1-3',
        key2: 'val2-3'
    },
    {
        key1: 'val1-4',
        key2: 'val2-4'
    },
    {
        key1: 'val1-5',
        key2: 'val2-5'
    },
    {
        key1: 'val1-6',
        key2: 'val2-6'
    },
    {
        key1: 'val1-7',
        key2: 'val2-7'
    }
];

Tests:

_.filter() Test
_.filter(testArray, item => { return 'val1-3' === item.key1 || 'val1-5' === item.key1; })
[].filter() Test
testArray.filter(item => { return 'val1-3' === item.key1 || 'val1-5' === item.key1; })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
_.filter() Test
[].filter() Test

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

Browser/OS: Chrome 116 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
_.filter() Test	6233467.5 Ops/sec
[].filter() Test	19665742.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases.

**Benchmark Definition:**

The benchmark is comparing two approaches to filter an array of objects: Lodash's `_filter()` function and the built-in `Array.prototype.filter()` method in JavaScript, also known as the square bracket syntax (`[]`).

**Options being compared:**

1. **Lodash's `_filter()`**: This is a utility function provided by the Lodash library, which extends the functionality of the native `Array.prototype.filter()` method.
2. **Built-in `Array.prototype.filter()` (square bracket syntax)**: This is the standard way to filter an array in JavaScript.

**Pros and Cons:**

* **Lodash's `_filter()`**: Pros:
	+ Provides a consistent API for filtering arrays, regardless of the underlying array implementation.
	+ Allows for more flexible and expressive filtering logic using Lodash's fluent chaining syntax (`_.filter(testArray, ...)`).
* Cons:
	+ Requires including the Lodash library in your project, which may increase bundle size.
	+ May have a slight performance overhead due to the overhead of calling a function on an object.
* **Built-in `Array.prototype.filter()` (square bracket syntax)**: Pros:
	+ No additional libraries are required, making it a lightweight option.
	+ Can be faster since it's a native implementation.
* Cons:
	+ Requires using square brackets (`[]`) to access the filter method, which can make the code more verbose.

**Library and its purpose:**

The Lodash library is a popular utility library for JavaScript that provides a wide range of functions for tasks such as array manipulation, string manipulation, and functional programming. In this case, the `_filter()` function is used to filter an array of objects based on a predicate (a function that returns a boolean value).

**Special JS feature or syntax:**

The benchmark uses the `const` keyword to declare variables, which is a modern JavaScript feature introduced in ECMAScript 2015. It's not a special syntax per se, but it's a good practice to use `const` when declaring variables that don't need to be reassigned.

**Other alternatives:**

If you prefer not to use Lodash or the built-in `Array.prototype.filter()` method, there are other filtering libraries and functions available in JavaScript. Some examples include:

* **Moment.js**: A popular library for working with dates and times.
* **Underscore.js**: Another utility library that provides a similar API to Lodash.
* **Array.prototype.includes()`: An alternative way to check if an element is present in an array, without needing to filter the entire array.

However, keep in mind that these alternatives may have their own trade-offs and performance characteristics.

Related benchmarks:

_.filter() vs [].filter() (version: 0)

Lodash vs ES6 비교

Comparing performance of: _.filter() Test vs [].filter() Test

Created: one year ago by: Registered User

Jump to the latest result

_.filter() Test

[].filter() Test

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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