Benchmark: Native map & filter vs reduce with push

HTML Preparation code:

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

Script Preparation code:

var arr = [];
for (var i = 0; i < 1000000; i++) {
  arr[i] = { num: i };
}

Tests:

map & filter
arr.map(item => item.num).filter(num => num > 15 && num < 30);
reduce
arr.reduce((newArr, item) => { if (item.num > 15 && item.num < 30) { newArr.push(item.num); } return newArr; }, []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map & filter
reduce

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Browser/OS: Chrome 107 on Linux

View result in a separate tab

Test name	Executions per second
map & filter	39.3 Ops/sec
reduce	96.5 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark measures the performance difference between two approaches for filtering data in JavaScript: using `Array.prototype.map` and `Array.prototype.filter`, versus using `Array.prototype.reduce`. The test case uses the Lodash library for the `map` and `filter` approach.

**Options Compared**

Two options are compared:

1. **Native map & filter**: Using the native `Array.prototype.map` and `Array.prototype.filter` methods.
2. **Reduce with push**: Using the `Array.prototype.reduce` method to build a new array, pushing elements that meet certain conditions.

**Pros and Cons of Each Approach**

### Native Map & Filter

Pros:

* Native implementation, optimized for performance
* Easy to read and understand code
* No additional library dependencies required

Cons:

* Can be slower due to the overhead of multiple method calls
* May not perform well on large datasets

### Reduce with Push

Pros:

* Can be faster for large datasets since it only requires a single pass through the array
* Allows for more control over the filtering process using the reducer function

Cons:

* Requires more complex code, potentially harder to read and understand
* Additional library dependencies (Lodash) required
* May not perform well on smaller datasets due to overhead of creating an empty array

**Library: Lodash**

Lodash is a popular JavaScript utility library that provides a lot of useful functions for common tasks. In this case, the `map` and `filter` methods are used from Lodash. The `reduce` method is also part of the native Array API.

**Special JS Feature or Syntax**

There is no special JavaScript feature or syntax mentioned in the benchmark definition.

**Other Alternatives**

Other alternatives for filtering data in JavaScript include:

* Using `Array.prototype.filter` with a callback function
* Using a library like jQuery, which provides similar functionality to Lodash
* Implementing custom filtering logic using ES6+ features like arrow functions and destructuring

It's worth noting that the performance difference between these approaches can be significant, especially for large datasets. The benchmark results show that Chrome 107 can execute `reduce` significantly faster than `map & filter`.

Related benchmarks:

Native map & filter vs reduce with push (version: 0)

Lodash map & filter vs reduce with push

Comparing performance of: map & filter vs reduce

Created: 3 years ago by: Registered User

Jump to the latest result

map & filter

reduce

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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