Benchmark: Comparision filter in js using different methods_v2

HTML Preparation code:

<script src="lodash.js"></script>

Script Preparation code:

var randomArray = [];
var arrayLength = 1E5
var comparisionFunction = (num) => num % 12 === 0 && num % 5 === 0 && num % 3 === 0

let i = 0;
while (i <= arrayLength) randomArray[i] = i++;

console.log(randomArray);

var filteredArray = []

Tests:

.filter()
filteredArray = randomArray.filter(comparisionFunction)
Lodash _.filter()
filteredArray = _.filter(randomArray, comparisionFunction);
.map().filter()
filteredArray = randomArray.map((num) => comparisionFunction(num) ? num : undefined).filter(Boolean)
For loop
filteredArray = [] for (i = 0; i < arrayLength; i++) { if (randomArray[i] % 12 === 0 && randomArray[i] % 5 === 0 && randomArray[i] % 3 === 0) { filteredArray.push(randomArray[i]) } }
.reduce()
filteredArray = randomArray.reduce((filteredArray, num) => { if (num % 12 === 0 && num % 5 === 0 && num % 3 === 0) { filteredArray.push(num) } return filteredArray }, [])
.reduce() with comparisionFunction
filteredArray = randomArray.reduce((filteredArray, num) => { if (comparisionFunction(num)) { filteredArray.push(num) } return filteredArray }, [])

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
.filter()
Lodash _.filter()
.map().filter()
For loop
.reduce()
.reduce() with comparisionFunction

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

Browser/OS: Chrome 112 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
.filter()	740.4 Ops/sec
Lodash _.filter()	893.6 Ops/sec
.map().filter()	56.8 Ops/sec
For loop	90.2 Ops/sec
.reduce()	775.2 Ops/sec
.reduce() with comparisionFunction	156.8 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of different filtering methods in JavaScript: `.filter()`, `Lodash _.filter()`, `.map().filter()`, for loop, and `.reduce()` with a custom comparison function.

**Filtering Methods Comparison**

Here's a brief explanation of each method:

1. `.filter()`: This method creates a new array with all elements that pass the test implemented by the provided function.
2. `Lodash _.filter()`: This is a higher-order function from the Lodash library that applies a filter function to an array, returning a new array with filtered elements.
3. `.map().filter()`: This method first creates a new array by applying the specified function to each element of the original array (using `.map()`), and then filters out the unwanted elements using `.filter()`.
4. For loop: A traditional for loop is used to iterate over the array and push elements that meet the condition into a new array.
5. `.reduce()` with custom comparison function: This method reduces an array to a single value by applying a callback function to each element, which returns a boolean indicating whether the element should be included in the result.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. `.filter()`:
	* Pros: concise, efficient, and widely supported.
	* Cons: can be less readable for complex filtering logic.
2. `Lodash _.filter()`:
	* Pros: convenient, flexible, and well-tested.
	* Cons: introduces an external dependency (Lodash), which may not be desired in all projects.
3. `.map().filter()`:
	* Pros: allows for more flexibility in filtering logic and can be readable for complex conditions.
	* Cons: creates two intermediate arrays, which can increase memory usage and slow down performance.
4. For loop:
	* Pros: straightforward, easy to understand, and no dependencies.
	* Cons: slower than array methods due to the overhead of explicit loops and indexing.
5. `.reduce()` with custom comparison function:
	* Pros: flexible, efficient, and can be used for complex filtering logic.
	* Cons: requires more cognitive effort from developers, as it's not a built-in array method.

**Other Considerations**

When choosing a filtering method, consider the following factors:

* **Performance**: If you need to filter large arrays frequently, `.filter()` or `Lodash _.filter()` might be more suitable.
* **Readability**: For complex filtering logic, `_.map().filter()` or the custom comparison function in `.reduce()` can provide better readability.
* **Memory usage**: Be aware of memory usage when using array methods like `.map()`, as they create intermediate arrays.

**Additional Notes**

The benchmark results show that:

* The order of execution matters for some methods, such as `_.map().filter()` and the custom comparison function in `.reduce()`.
* Lodash _.filter() consistently outperforms the native `.filter()` method.
* The custom comparison function in `.reduce()` is slower than other methods due to its additional cognitive effort.

The provided benchmark provides a useful comparison of different filtering methods, helping developers choose the most suitable approach for their specific use cases.

Related benchmarks:

Comparision filter in js using different methods_v2 (version: 1)

Comparing performance of: .filter() vs Lodash _.filter() vs .map().filter() vs For loop vs .reduce() vs .reduce() with comparisionFunction

Created: one year ago by: Registered User

Jump to the latest result

.filter()

Lodash _.filter()

.map().filter()

For loop

.reduce()

.reduce() with comparisionFunction

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):