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

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]), []);
reduce() + push()
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 reducePush = arr.reduce((acc, val) => { if (val.a !== 1) acc.push(val.a); return acc; }, []);
forEach
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}]; let result = [] const forEach = arr.forEach(val => { if (val.a !== 1) result.push(val.a); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

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

Browser/OS: Chrome 104 on Linux

View result in a separate tab

Test name	Executions per second
filter() then map()	4641539.0 Ops/sec
reduce() + concat()	935309.6 Ops/sec
reduce() + push()	5563596.0 Ops/sec
forEach	5262336.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**What is being tested?**

MeasureThat.net is testing the performance of different JavaScript operations on an array of objects. Specifically, it's comparing the performance of three approaches:

1. **filter() then map()**: Applying a filter function to remove elements with a certain property value (`a !== 1`) and then applying a mapping function to extract a specific property value (`x.a`).
2. **reduce() + concat()**: Reducing an array by applying a callback function that concatenates values when the condition is met, while also removing elements with a certain property value.
3. **reduce() + push()**: Reducing an array by applying a callback function that pushes values to an accumulator array when the condition is met, and also removing elements with a certain property value.
4. **forEach**: Applying an array method (`forEach`) to iterate over the array and push values to an accumulator array when the condition is met.

**Options compared**

The benchmark compares the performance of these four approaches:

* `filter() then map()` (T1)
* `reduce() + concat()` (T2)
* `reduce() + push()` (T3)
* `forEach` (T4)

**Pros and Cons of each approach:**

1. **filter() then map()**:
	* Pros: Easy to understand, concise code.
	* Cons: May involve additional overhead for the two separate operations.
2. **reduce() + concat()**:
	* Pros: Reduces array size while accumulating values.
	* Cons: May be slower due to the concatenation operation, which can be expensive in large arrays.
3. **reduce() + push()**:
	* Pros: Similar to `filter()` then map() but with a single accumulator update.
	* Cons: Pushing elements to an array can be slow and may lead to performance issues.
4. **forEach**:
	* Pros: Simple, easy to understand, no extra overhead for accumulation or concatenation.
	* Cons: May involve more iterations due to the callback function.

**Other considerations:**

* The benchmark uses a large array with 16 elements, which can impact performance.
* The `filter()` and `reduce()` operations are often used together in real-world scenarios, so this comparison is relevant for those use cases.
* The use of `push()` or `concat()` may not be necessary depending on the specific requirements of your code.

**Library usage:**

None of the test cases explicitly uses any third-party libraries. However, it's worth noting that `reduce()` and `forEach` are built-in methods in JavaScript, while `filter()`, `map()`, and `push()` are also part of the standard library.

**Special JS features or syntax:**

There are no special JS features or syntaxes mentioned in this benchmark. The focus is on comparing different approaches to achieve a specific result.

I hope this explanation helps you understand what's being tested in MeasureThat.net!

Related benchmarks:

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

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

Created: 2 years ago by: Guest

Jump to the latest result

filter() then map()

reduce() + concat()

reduce() + push()

forEach

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