Benchmark: native built-in filter map function vs native logic for filter, map (about huge map)

HTML Preparation code:

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

Script Preparation code:

var numbers = [10, 40, 230, 15, 18, 51, 1221, 24, 36, 28, 10, 6, 8, 7, 55, 89, 256, 102, 1, 23, 41, 38, 7, 2, 5, 9, 60]
var input = []
Array(1000).fill().forEach(_ => input.push(...numbers))

Tests:

native built-in filter
input.filter(i => i > 10).map(x => x * x)
native logic for filter, map
let result = [] for (let x in input) { if (x > 10) result.push(x * x) }
using forEach
let result = [] input.forEach(x => { if (x > 10) result.push(x * x) })
lodash chain
_.chain(input).filter(x => x > 10).map(x => x * x).value()
lodash not chain
_.map(_.filter(input, x => x > 10), x => x * x)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
native built-in filter
native logic for filter, map
using forEach
lodash chain
lodash not chain

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 73 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
native built-in filter	699.1 Ops/sec
native logic for filter, map	50.9 Ops/sec
using forEach	1825.8 Ops/sec
lodash chain	439.0 Ops/sec
lodash not chain	452.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks and explore what's being tested on MeasureThat.net.

**Benchmark Overview**

The benchmark measures the performance of different approaches to filtering and mapping large arrays in JavaScript. The input array contains 20,000 elements, which are then filtered and mapped using various methods.

**Options Compared**

There are four options compared:

1. **Native Built-in Filter**: This approach uses the `filter()` method directly on the array.
2. **Native Logic for Filter, Map**: This approach uses a traditional `for` loop to filter and map the elements.
3. **Using forEach**: This approach uses the `forEach()` method to iterate over the array and apply the filtering and mapping logic.
4. **Lodash Chain**: This approach uses Lodash's `chain()` function to create a pipeline of operations that can be applied sequentially.

**Pros and Cons**

Here's a brief overview of each approach:

1. **Native Built-in Filter**:
	* Pros: Native performance, easy to read and maintain.
	* Cons: May not work as expected for very large arrays or complex filtering logic.
2. **Native Logic for Filter, Map**:
	* Pros: Flexible, can be used for complex filtering logic.
	* Cons: More verbose and may have performance overhead due to the loop.
3. **Using forEach**:
	* Pros: Simple and easy to read, works well with modern browsers.
	* Cons: May not be as efficient as native methods or Lodash's chain.
4. **Lodash Chain**:
	* Pros: Easy to use, can handle complex filtering logic.
	* Cons: Adds external dependency (Lodash), may have performance overhead.

**Library and Purpose**

The benchmark includes Lodash as a reference implementation for the `chain()` function. Lodash is a popular JavaScript library that provides various utility functions for tasks like array manipulation, string manipulation, and more.

**Special JS Feature or Syntax**

None of the approaches rely on any special JavaScript features or syntax beyond what's considered standard in modern JavaScript development.

**Other Alternatives**

If you're interested in exploring other options, here are a few alternatives:

1. **Array.prototype.every()` and `Array.prototype.some()`: These methods can be used to filter arrays using conditional logic.
2. **Reduce()**: This method can be used to reduce an array to a single value by applying a callback function to each element.
3. **Promises and async/await**: If you're working with asynchronous code, promises and async/await can be used to handle filtering and mapping logic in a more concurrent-friendly way.

I hope this explanation helps you understand the benchmark and its options better!

Related benchmarks:

native built-in filter map function vs native logic for filter, map (about huge map) (version: 0)

native built-in filter map function vs native logic for filter, map

Comparing performance of: native built-in filter vs native logic for filter, map vs using forEach vs lodash chain vs lodash not chain

Created: 4 years ago by: Guest

Jump to the latest result

native built-in filter

native logic for filter, map

using forEach

lodash chain

lodash not chain

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