Benchmark: filtering array with push vs reduce

Script Preparation code:


var arr = new Array(1000);
for (let i = 0; i < 1000; ++i) {
   arr[i] = i % 2 === 0 ? true : null;
}

Tests:

filter with push
const result = []; for (const item of arr) { if (item != null) { result.push(item); } } return result;
filter with reduce
return arr.reduce( (arr, item) => (item != null ? [...arr, item] : arr), [], );

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
filter with push
filter with reduce

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Browser/OS: Firefox 115 on Windows

View result in a separate tab

Test name	Executions per second
filter with push	174374.3 Ops/sec
filter with reduce	1016.5 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 is being tested, compared, and the pros and cons of each approach.

**Benchmark Overview**

The benchmark compares two approaches to filter an array in JavaScript: using `push` with a conditional statement and using `reduce`.

**Script Preparation Code**

The script preparation code creates an array `arr` with 1000 elements, where every other element is set to `true`, `null`, or both. This array is used as the input for the benchmark.

**Benchmark Definition**

The benchmark definition consists of two test cases:

1. "filter with push": This test case uses a `for...of` loop and conditional statement to filter the array, pushing non-null elements into an empty array.
2. "filter with reduce": This test case uses the `reduce()` method to filter the array, accumulating filtered elements in an initial empty array.

**Libraries and Features**

Neither of these approaches relies on a specific library or JavaScript feature beyond basic language constructs. However, it's worth noting that both methods are using modern JavaScript features: `for...of` loops (introduced in ECMAScript 2015) and the spread operator (`...`) to create new arrays.

**Approach Comparison**

Here's a brief comparison of the two approaches:

**Push Method ("filter with push")**

Pros:

* Easy to understand and implement for developers familiar with array manipulation.
* Can be optimized further by using techniques like caching or chunking.

Cons:

* May incur overhead due to the creation of intermediate arrays.
* Less efficient than `reduce` when dealing with large datasets.

**Reduce Method ("filter with reduce")**

Pros:

* More concise and expressive, making it easier to read and maintain.
* Optimized for performance by accumulating filtered elements in a single array.
* Can handle large datasets efficiently.

Cons:

* May be less intuitive for developers unfamiliar with `reduce()` or functional programming concepts.

**Other Considerations**

When evaluating the performance of these two approaches, consider factors like:

* Cache locality: How well do the push and reduce methods leverage cache hierarchies?
* Memory allocation and deallocation: Which approach incurs more overhead when creating intermediate arrays?
* Data alignment: Are there any specific data structures or patterns in the input array that can affect performance?

**Alternatives**

Other approaches to filter an array include:

1. `filter()` method (more concise, but potentially slower than `reduce` for large datasets).
2. Using a third-party library like Lodash's `filterBy` function.
3. Implementing a custom filter function using bitwise operations or other optimization techniques.

For this specific benchmark, the `reduce` approach is likely to outperform the `push` method due to its optimized performance characteristics and concise implementation.

Related benchmarks:

filtering array with push vs reduce (version: 0)

Comparing performance of: filter with push vs filter with reduce

Created: 3 years ago by: Guest

Jump to the latest result

filter with push

filter with reduce

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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