Benchmark: Lodash Filter vs Native Filter with same empty check

HTML Preparation code:

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

Script Preparation code:

window.items = [
  { id: 'a5', a: 1, b: 2 },
  { id: 'a3', a: 1, b: 2 },
  { id: 'a8', a: 1, b: 2 },
  { id: 'b1', a: 1, b: 2 },
  { id: 'ac0', a: 1, b: 2 },
  { id: 'a7', a: 1, b: 2 },
  { id: 'a0', a: 1, b: 2 },
  { id: 'a6', a: 1, b: 2 },
  { id: 'a5', a: 1, b: 2 },
  { id: 'a4', a: 1, b: 2 },
  { id: 'a3', a: 1, b: 2 },
  { id: 'a2', a: 1, b: 2 }
];

window.products = {
  a0: { x: 1, y: 1, z: 1, id: 'a0' },
  a1: { x: 1, y: 1, z: 1, id: 'a1' },
  a2: { x: 1, y: 1, z: 1, id: 'a2' },
  a3: { x: 1, y: 1, z: 1, id: 'a3' },
  a5: { x: 1, y: 1, z: 1, id: 'a5' },
  a7: { x: 1, y: 1, z: 1, id: 'a7' },
  a8: { x: 1, y: 1, z: 1, id: 'a8' },
  a9: { x: 1, y: 1, z: 1, id: 'a9' },
  a10: { x: 1, y: 1, z: 1, id: 'a10' },
  a11: { x: 1, y: 1, z: 1, id: 'a11' },
  a12: { x: 1, y: 1, z: 1, id: 'a12' },
  a13: { x: 1, y: 1, z: 1, id: 'a13' },
  a14: { x: 1, y: 1, z: 1, id: 'a14' },
  a15: { x: 1, y: 1, z: 1, id: 'a15' },
  a16: { x: 1, y: 1, z: 1, id: 'a16' }
};

Tests:

Lodash Filter
window.result = _(items) .map(item => item.id) .uniq() .map(id => products[id] || {}) .filter(el => !!Object.keys(el).length) .value(); //console.log('result lodash:', result);
Native Filter
window.result = _(items) .map(item => item.id) .uniq() .map(id => products[id] || {}) .value() .filter(el => !!Object.keys(el).length); //console.log('result native:', result);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash Filter
Native Filter

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

**What is being tested?**

The benchmark measures the performance difference between two approaches:

1. **Lodash Filter**: Using the Lodash library to filter an array of objects based on the presence of keys in each object.
2. **Native Filter**: Implementing a native JavaScript function to achieve the same filtering effect as Lodash.

**Options being compared**

The benchmark compares the performance of these two approaches:

* Lodash Filter: Uses the `_.filter()` method from the Lodash library, which iterates over an array and returns a new array with elements that pass a test.
* Native Filter: Implements a custom function to filter the array, using JavaScript's built-in `Array.prototype.filter()` method.

**Pros and Cons of each approach**

**Lodash Filter:**

Pros:

* Easy to implement and use
* Lodash provides additional functionality and utilities

Cons:

* Requires including an external library (Lodash)
* May have a higher overhead due to the addition of a new dependency

Native Filter:

Pros:

* No external dependencies or libraries required
* Optimized for performance since it's implemented in pure JavaScript

Cons:

* More complex implementation, requiring understanding of filtering algorithms and array methods

**Other considerations**

The benchmark also considers other factors that might affect performance, such as:

* Browser and device types (e.g., Chrome 98 on Windows Desktop)
* Execution frequency per second (ExecutionsPerSecond)

**Library: Lodash.js**

Lodash is a popular JavaScript library providing utility functions for tasks like filtering, mapping, reducing, and more. In this benchmark, Lodash is used to implement the `_.filter()` method, which provides an efficient way to filter arrays.

**Special JS feature or syntax**

The benchmark uses ES6+ features, such as arrow functions (`=>`) and template literals (`\r\n\t`), which are supported by modern browsers like Chrome 98. The use of these features might impact performance or compatibility with older browsers.

Now that we've explored the details of this benchmark, let's talk about alternatives!

**Other alternatives**

If you're interested in exploring alternative approaches to filtering arrays in JavaScript, here are a few options:

1. **Array.prototype.filter()**: As used in the Native Filter implementation, this is a built-in method for filtering arrays.
2. **For loops and conditional statements**: You can implement a simple filtering algorithm using traditional loops and conditional statements.
3. **Other libraries or frameworks**: Depending on your specific needs and requirements, other libraries like Ramda or Immutable.js might offer alternative solutions for array filtering.

Feel free to ask if you have any further questions or if there's anything else I can help with!

Related benchmarks:

Lodash Filter vs Native Filter with same empty check (version: 0)

Comparing performance of: Lodash Filter vs Native Filter

Created: 4 years ago by: Guest

Jump to the latest result

Lodash Filter

Native Filter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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