Benchmark: filter() then map() vs reduce() + concat()

Tests:

filter() then map()
const arr = [{a: 1}, {a: 2}, {a: 1}, {a: 1}, {a: 2}, {a: 1}, {a: 1}, {a: 2}, {a: 1}, {a: 1}, {a: 2}, {a: 1}, {a: 1}, {a: 2}, {a: 1}]; const filterMap = arr.filter(x => x.a !== 1).map(x => x.a)
reduce() + concat()
const arr = [{a: 1}, {a: 2}, {a: 1}, {a: 1}, {a: 2}, {a: 1}, {a: 1}, {a: 2}, {a: 1}, {a: 1}, {a: 2}, {a: 1}, {a: 1}, {a: 2}, {a: 1}]; const reduceConcat = arr.reduce((acc, val) => val.a === 1 ? acc : acc.concat([val.a]), []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
filter() then map()
reduce() + concat()

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.54 Safari/537.36 Edg/101.0.1210.39

Browser/OS: Chrome 101 on Windows

View result in a separate tab

Test name	Executions per second
filter() then map()	10166765.0 Ops/sec
reduce() + concat()	1465436.6 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark measures the performance of two different approaches to process an array in JavaScript: filtering and mapping, versus reducing and concatenating.

**Filtering and Mapping (filter() then map())**

This approach involves first removing elements from the array that do not meet a certain condition (in this case, elements with `a` equal to 1), and then applying a transformation function to each remaining element. In this specific test, the transformation function is simply extracting the value of `x.a`.

**Reduce and Concatenating (reduce() + concat())**

This approach involves reducing the array to an accumulator, which in this case is initialized as an empty array. The callback function iterates over the elements of the array, adding each element to the accumulator if it meets a certain condition (in this case, `val.a === 1`), or appending its value to the accumulator otherwise.

**Options Compared**

The two approaches are compared in terms of their execution time and memory usage. The test measures how many executions per second can be achieved by each approach on a desktop Windows machine running Chrome 101.

**Pros and Cons**

* **Filtering and Mapping (filter() then map())**
	+ Pros:
		- Generally considered more efficient for large datasets, as it allows for early removal of unwanted elements.
		- Can be more memory-efficient, as only the necessary elements are processed.
	+ Cons:
		- Requires two iterations over the array: first filtering and then mapping.
* **Reduce and Concatenating (reduce() + concat())**
	+ Pros:
		- Can be more efficient for smaller datasets or when the transformation function is simple.
		- Reduces the number of iterations required, as all elements are processed at once.

However, this approach can lead to increased memory usage, especially if the accumulator grows large. Additionally, it may not be suitable for very large datasets, due to performance limitations.

**Library and Purpose**

There is no explicit library mentioned in the benchmark definition or test cases. However, the `reduce()` function is a built-in JavaScript method that applies a reduction operation to an array.

**Special JS Feature or Syntax**

The benchmark does not use any special JavaScript features or syntax beyond what is standard in modern JavaScript (ES6+).

**Alternatives**

Other alternatives for processing arrays in JavaScript include:

1. Using `forEach()`, which applies a callback function to each element of the array, but does not return a new value.
2. Using `every()` and `some()` methods, which test whether all or some elements of an array meet a condition, respectively.
3. Using `Array.prototype.every()` and `Array.prototype.some()` methods, which are shorthand versions of the `every()` and `some()` methods.
4. Using `Array.prototype.reduceRight()`, which applies the reduction operation to the array from right to left.

These alternatives may offer different trade-offs in terms of performance, memory usage, and code readability, depending on the specific use case.

Related benchmarks:

filter() then map() vs reduce() + concat() (version: 0)

Comparing performance of: filter() then map() vs reduce() + concat()

Created: 2 years ago by: Guest

Jump to the latest result

filter() then map()

reduce() + concat()

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