Benchmark: lodash compact vs es6 compact/filter

HTML Preparation code:

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

Script Preparation code:

var data = [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];
var compact = (arr) => arr.filter((o) => !!o);

Tests:

lodash compact
_.compact(data);
compact helper fn
compact(data);
es6 filter fn
data.filter((o) => !!o);
es6 filter fn boolean
data.filter(Boolean)

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

lodash compact

11.1M/s

es6 filter fn

10.6M/s

compact helper fn

7.7M/s

es6 filter fn boolean

4.8M/s

Fastest: lodash compact (2.3x faster)

View exact numbers

✓ lodash compact: 11,071,708 ops/sec
• es6 filter fn: 10,577,142 ops/sec
• compact helper fn: 7,665,236 ops/sec
• es6 filter fn boolean: 4,771,557 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
lodash compact
compact helper fn
es6 filter fn
es6 filter fn boolean

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

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

lodash compact

11.1M/s

es6 filter fn boolean

10.7M/s

es6 filter fn

10.6M/s

compact helper fn

1.5M/s

View exact numbers

Test name	Executions per second
✓ lodash compact	11,071,708 Ops/sec
es6 filter fn boolean	10,693,751 Ops/sec
es6 filter fn	10,577,142 Ops/sec
compact helper fn	1,483,313 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 benchmark.

**What is being tested?**

The provided JSON represents a JavaScript microbenchmark that compares the performance of three different approaches to remove null values from an array:

1. **Lodash compact**: This method uses the `_.compact()` function from the Lodash library, which filters out null and undefined values from an array.
2. **ES6 filter**: This is a built-in JavaScript method that uses the `filter()` function to create a new array with only the elements for which the provided callback function returns true. In this case, the callback function checks if the element is truthy (i.e., not null or undefined).
3. **Custom compact helper function**: This is a simple custom function that wraps the built-in `filter()` method to achieve the same result as Lodash's `compact()`.

**Options compared**

The three options being compared are:

* Lodash compact: uses the `_compact()` function from the Lodash library
* ES6 filter with explicit `Boolean` filtering: uses the `filter()` method and passes `Boolean` as a callback to check if an element is truthy (i.e., not null or undefined)
* Custom compact helper function: wraps the built-in `filter()` method

**Pros and cons of each approach**

1. **Lodash compact**: Pros:
	* Easy to use and understand, especially for developers familiar with Lodash.
	* Well-tested and optimized for performance.
Cons:
	* Adds an extra dependency (the Lodash library) that may not be necessary in all cases.
2. **ES6 filter with explicit `Boolean` filtering**:
	* Pros:
		+ Does not add any extra dependencies.
		+ Can be more readable and easier to understand, especially for developers familiar with JavaScript's `filter()` method.
	* Cons:
		+ May be slightly slower due to the additional overhead of checking if an element is truthy using `Boolean`.
3. **Custom compact helper function**:
	* Pros:
		+ Does not add any extra dependencies.
		+ Can be optimized for performance by avoiding unnecessary checks.
	* Cons:
		+ Requires more manual effort and understanding of the underlying `filter()` method.

**Library: Lodash**

Lodash is a popular JavaScript library that provides a collection of utility functions, including `compact()`. The `compact()` function filters out null and undefined values from an array. In this benchmark, Lodash's `compact()` is used as one of the options being compared.

**Special JS feature or syntax: None**

There are no special JavaScript features or syntaxes involved in this benchmark.

**Alternative approaches**

Other possible approaches to remove null values from an array could include:

* Using a regular expression with the `g` flag to filter out null and undefined values.
* Using a one-liner using the spread operator (`...`) and the `every()` method.
* Implementing a custom solution using a for loop or recursion.

However, these alternatives are not tested in this specific benchmark.

lodash compact vs es6 compact/filter (version: 1) Benchmark.js

Comparing performance of: `lodash compact vs compact helper fn vs es6 filter fn vs es6 filter fn boolean`

Created: 5 years ago by: Registered User

Go to the latest result

lodash compact

compact helper fn

es6 filter fn

es6 filter fn boolean

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

lodash compact vs es6 compact/filter (version: 1) Benchmark.js

Comparing performance of: lodash compact vs compact helper fn vs es6 filter fn vs es6 filter fn boolean

Created: 5 years ago by: Registered User

Go to the latest result

lodash compact

compact helper fn

es6 filter fn

es6 filter fn boolean

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 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: `lodash compact vs compact helper fn vs es6 filter fn vs es6 filter fn boolean`