Benchmark: lodash compact vs native filter vs lodash filter

HTML Preparation code:

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

Script Preparation code:

var ops = [null, 1, 2, 3, 4, 5, null, null, null, 3, 4,5, 6, 34,341,2,2,2,1,212,21212,34,1,3112, null, '', '', 'asdf'];

Tests:

lodash compact
_.compact(ops)
Native filter
_.filter(ops, Boolean)
Native filter (Boolean)
ops.filter(Boolean)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
lodash compact
Native filter
Native filter (Boolean)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36 Edg/142.0.0.0

Browser/OS: Chrome 142 on Windows

View result in a separate tab

Test name	Executions per second
lodash compact	12779402.0 Ops/sec
Native filter	5175871.5 Ops/sec
Native filter (Boolean)	9566891.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.

**What is being tested?**

The benchmark is comparing three approaches to remove null and empty values from an array:

1. Lodash `compact` function
2. Native JavaScript filter method (`Array.prototype.filter()`)
3. Native JavaScript filter method with a boolean wrapper (`ops.filter(Boolean)`)

These functions are testing the performance of each approach on a large dataset of arrays, specifically designed to contain various types of values including null and empty strings.

**Options compared:**

The three options being compared are:

1. **Lodash `compact` function**: This is a utility function from the Lodash library that removes all null and undefined values from an array.
2. **Native JavaScript filter method (`Array.prototype.filter()`)**: This method filters the elements of an array, returning a new array with only the elements for which the callback function returns true. In this case, it's being used with a simple boolean check to remove null and empty values.
3. **Native JavaScript filter method with a boolean wrapper (`ops.filter(Boolean)`)**: This is similar to the native filter method but uses the `Boolean` function to wrap the value before filtering. This allows for more flexibility in the callback function, as it can be used to filter based on any type of value.

**Pros and cons of each approach:**

1. **Lodash `compact` function**:
	* Pros: Easy to use, efficient, and well-tested.
	* Cons: Requires importing Lodash library, which may not be desirable for all projects.
2. **Native JavaScript filter method (`Array.prototype.filter()`)**:
	* Pros: Built-in, no dependencies required, flexible callback functions.
	* Cons: May be slower due to the overhead of creating a new array and calling the callback function on each element.
3. **Native JavaScript filter method with a boolean wrapper (`ops.filter(Boolean)`)**:
	* Pros: Similar benefits to native filter method but avoids potential issues with non-boolean values.
	* Cons: Requires a small hack (using `Boolean` function) to make it work.

**Library and its purpose:**

Lodash is a popular JavaScript utility library that provides various functions for tasks such as array manipulation, string manipulation, and more. In this benchmark, the `compact` function is being used to demonstrate the performance of Lodash's filtering functionality.

**Special JS feature or syntax:**

None mentioned in the provided information. However, it's worth noting that `ops.filter(Boolean)` relies on a subtle JavaScript feature called "truthy values" and "falsy values", which can be an interesting aspect of the language for those familiar with them.

**Other alternatives:**

If you're looking for alternative approaches to filtering arrays in JavaScript, some options include:

1. **Using `Array.prototype.map()` and then using `Boolean` function**: This approach involves transforming each element in the array using `map()`, applying a boolean wrapper (e.g., using the `Boolean` function), and then collecting the results into a new array.
2. **Using `Array.prototype.every()` or `Array.prototype.some()`**: These methods can be used to filter arrays based on conditions, but may not be as flexible as the native filter method.

Keep in mind that these alternatives might have different performance characteristics compared to the native filter method and Lodash's `compact` function.

Related benchmarks:

lodash compact vs native filter vs lodash filter (version: 0)

Comparing performance of: lodash compact vs Native filter vs Native filter (Boolean)

Created: 3 years ago by: Guest

Jump to the latest result

lodash compact

Native filter

Native filter (Boolean)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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