Benchmark: Lodash reduce filter vs Native reduce filter vs Lodash filter vs Native filter

Lodash reduce filter vs Native reduce filter vs Lodash filter vs Native filter (version: 9) Benchmark.js

compare filter methods on arrays that both modify objects and remove items from the array.

Comparing performance of: `Reduce filter vs Lodash reduce filter vs Native filter vs Lodash filter vs Reduce modify vs Map modify`

Created: 7 years ago by: Registered User

Go to the latest result

HTML Preparation code:

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

Script Preparation code:

var testCopy = null;
var testArray = [{
  id: 1,
  description: 'Random description.',
  testDate: new Date(),
  testBoolean: true,
  testObject: {
    testString: 'test string',
    testNumber: 12345
  },
  testArray: [{
    myName: 'test name',
    myNumber: 123245
  }]
},{
  id: 2,
  description: 'Random description.',
  testNumber: 123456789,
  testBoolean: true,
  testObject: {
    testString: 'test string',
    testNumber: 12345
  },
  testArray: [{
    myName: 'test name',
    myNumber: 123245
  }]
}];

Tests:

Reduce filter
testCopy = testArray.reduce((accumulator, currentValue) => { if(currentValue.id != 2) { currentValue.description = 'test'; accumulator.push(currentValue); return accumulator; } return accumulator; },[])
Lodash reduce filter
testCopy = _.reduce(testArray,(accumulator, currentValue) => { if(currentValue.id != 2) { currentValue.description = 'test'; accumulator.push(currentValue); return accumulator; } return accumulator; },[]);
Native filter
testCopy = testArray.filter(o => { if(o.id != 2) { o.description = 'test'; return o; } });
Lodash filter
testCopy = _.filter(testArray, function(o) { if(o.id != 2) { o.description = 'test'; return o; } });
Reduce modify
testCopy = testArray.reduce((accumulator, currentValue) => { if(currentValue.id == 2) { currentValue.description = 'test'; accumulator.push(currentValue); return accumulator; } return accumulator; },[])
Map modify
testCopy = testArray.map((item)=>{ if(item.id == 2){ item.description = 'test'; } return item; });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Reduce filter
Lodash reduce filter
Native filter
Lodash filter
Reduce modify
Map modify

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:125.0) Gecko/20100101 Firefox/125.0

Browser/OS: Firefox 125 on Mac OS X 10.15

View result in a separate tab

Reduce filter

57.9M/s

Native filter

51.6M/s

Map modify

49.1M/s

Reduce modify

46.0M/s

Lodash reduce filter

39.5M/s

Lodash filter

39.4M/s

View exact numbers

Test name	Executions per second
✓ Reduce filter	57,870,372 Ops/sec
Native filter	51,568,620 Ops/sec
Map modify	49,063,268 Ops/sec
Reduce modify	46,049,584 Ops/sec
Lodash reduce filter	39,526,032 Ops/sec
Lodash filter	39,434,636 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 and explain what's being tested, compared, and some pros/cons of different approaches.

**Benchmark Overview**

The benchmark measures the performance of four different methods for filtering an array in JavaScript:

1. `reduce` (both native and Lodash implementation)
2. `filter` (both native and Lodash implementation)

The test data consists of a large array with multiple objects, each containing several properties. The filter method should remove all objects from the array except those with `id == 2`, while modifying their `description` property.

**Options Compared**

Here's a summary of the options being compared:

* **Native reduce**: Uses the built-in `reduce()` method to iterate over the array and accumulate the filtered elements.
* **Lodash reduce**: Uses Lodash's implementation of `reduce()`, which is a modified version of the native method.
* **Native filter**: Uses the built-in `filter()` method to create a new array with only the desired elements.
* **Lodash filter**: Uses Lodash's implementation of `filter()`, which is a modified version of the native method.

**Pros and Cons**

Here are some pros and cons for each approach:

1. **Native reduce**
	* Pros:
		+ Lightweight and efficient
		+ Suitable for small to medium-sized datasets
	* Cons:
		+ Can be slower than optimized libraries like Lodash for large datasets
2. **Lodash reduce**
	* Pros:
		+ Optimized for performance on large datasets
		+ Provides a convenient, intuitive API for filtering and reducing arrays
	* Cons:
		+ Adds extra overhead due to the use of an external library
3. **Native filter**
	* Pros:
		+ Simple and lightweight
		+ Suitable for most use cases, including small to medium-sized datasets
	* Cons:
		+ Can be slower than optimized libraries like Lodash for large datasets
4. **Lodash filter**
	* Pros:
		+ Optimized for performance on large datasets
		+ Provides a convenient, intuitive API for filtering arrays
	* Cons:
		+ Adds extra overhead due to the use of an external library

**Library and Syntax**

The benchmark uses Lodash as one of its libraries. Lodash is a popular JavaScript utility library that provides a wide range of functions for tasks such as array manipulation, object creation, and more.

The syntax used in the benchmark is standard JavaScript, with no additional context or dependencies required.

**Execution Results**

The benchmark's execution results show the performance of each method across different browsers and devices. The results are sorted by execution speed, with the fastest method appearing first.

Keep in mind that these results may vary depending on the specific use case, data size, and environment.