Benchmark: filter(_ => !!_) vs filter(Boolean) vs filter(v => v != null)

HTML Preparation code:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

Script Preparation code:

var elements = [0, 1, false, 2, '', 3];

Tests:

filter(_ => _)
elements.filter(_ => !!_)
filter(Boolean)
elements.filter(Boolean)
filter(v => v != null)
elements.filter(v => v != null)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
filter(_ => _)
filter(Boolean)
filter(v => v != null)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_3_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3.1 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 18 on iOS 18.3.2

View result in a separate tab

Test name	Executions per second
filter(_ => _)	34047088.0 Ops/sec
filter(Boolean)	39794736.0 Ops/sec
filter(v => v != null)	18760992.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The benchmark defined in the JSON provided tests the performance of different approaches to filtering an array in JavaScript. Specifically, it compares three methods for filtering a list that contains various falsy values: zero (`0`), `false`, an empty string (`''`), and `undefined`. The intention is to see how efficiently each method can perform this operation.

### Options Compared

1. **`filter(_ => !!_)`**
   - **Description**: This approach uses an arrow function that applies the logical NOT operator twice (`!!_`). The first `!` converts the value to a boolean (truthy or falsy), and the second `!` converts it back, effectively coercing the value into its boolean equivalent and filtering out falsy values.
   - **Pros**: This method is straightforward and operates explicitly on boolean coercion.
   - **Cons**: Using double negation can be less readable for developers who may not be familiar with this pattern.

2. **`filter(Boolean)`**
   - **Description**: Here, the `Boolean` constructor is passed directly to `filter()`, which implicitly converts values to booleans and filters out falsy values.
   - **Pros**: This is the most concise and arguably the most readable method of filtering out falsy values. It leverages the built-in `Boolean` function, making it clear that the intent is to filter based on truthiness.
   - **Cons**: Some may find it slightly less explicit than other methods, especially those unfamiliar with JavaScript’s type coercion.

3. **`filter(v => v != null)`**
   - **Description**: This method checks if the value is not `null` or `undefined` using the loose inequality operator (`!=`). It will retain all other falsy values (`0`, `false`, `''`).
   - **Pros**: This approach is useful when you want to exclude only `null` and `undefined` but keep other falsy values in the filtered results.
   - **Cons**: It doesn't filter out `0`, `false`, or empty strings, which may not be desirable in every context. Additionally, the use of `!=` introduces potential complexity due to JavaScript's type coercion.

### Results Interpretation

The benchmark results indicate how many times per second each filtering approach can execute, allowing for comparison of their performance in a real usage scenario:

- **`filter(v => v != null)`** showed the best performance at **53,255,440 executions per second**.
- **`filter(Boolean)`** followed with **38,030,824 executions per second**.
- **`filter(_ => !!_)`** performed least efficiently with **37,795,284 executions per second**.

### Other Considerations

- **Browser Performance**: The testing was performed in Chrome 133 on macOS, indicating that results may vary across different browsers due to their internal JavaScript engines.
- **Code Readability and Maintainability**: While performance is crucial, maintainability should also be a priority. Using concise methods like `filter(Boolean)` is generally encouraged for clearer and more understandable code.
- **Use Case**: The choice of method can depend on the specific use case. If only `null` and `undefined` should be excluded, then `filter(v => v != null)` is appropriate. If all falsy values need to be excluded, `filter(Boolean)` is better.

### Alternative Approaches

1. **Using Lodash's `_.compact()`**: If working with the Lodash library (which is included in the setup), you could use `_.compact(elements)`, which creates an array with all falsy values removed. This is a handy method that enhances readability but may introduce a dependency on an external library.
   
2. **Plain Loops**: Using traditional for loops or `forEach` iterations is another alternative. While it might be more verbose, it can provide more control over the filtering process (including additional logic).

In summary, the benchmark tests performance of various filtering techniques in JavaScript, each suitable for different scenarios, balancing performance, and code readability.

Related benchmarks:

filter(_ => !!_) vs filter(Boolean) vs filter(v => v != null) (version: 1)

Comparing performance of: filter(_ => _) vs filter(Boolean) vs filter(v => v != null)

Created: one month ago by: Guest

Jump to the latest result

filter(_ => _)

filter(Boolean)

filter(v => v != null)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):