Benchmark: filtering array with push vs reduce with fewer elements

Script Preparation code:

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

Tests:

filter with push (bigArr)
const result = []; for (const item of bigArr) { if (item != null) { result.push(item); } } return result;
filter with reduce (bigArr)
return bigArr.reduce( (arr, item) => (item != null ? [...arr, item] : arr), [], );
filter with push (smallArr)
const result = []; for (const item of smallArr) { if (item != null) { result.push(item); } } return result;
filter with reduce (smallArr)
return smallArr.reduce( (arr, item) => (item != null ? [...arr, item] : arr), [], );
filter with push (vSmallArr)
const result = []; for (const item of vSmallArr) { if (item != null) { result.push(item); } } return result;
filter with reduce (vSmallArr)
return vSmallArr.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 (bigArr)
filter with reduce (bigArr)
filter with push (smallArr)
filter with reduce (smallArr)
filter with push (vSmallArr)
filter with reduce (vSmallArr)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

Browser/OS: Chrome 110 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
filter with push (bigArr)	274531.2 Ops/sec
filter with reduce (bigArr)	7216.6 Ops/sec
filter with push (smallArr)	10106798.0 Ops/sec
filter with reduce (smallArr)	4004211.0 Ops/sec
filter with push (vSmallArr)	9626839.0 Ops/sec
filter with reduce (vSmallArr)	3903657.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested, compared options, pros/cons, and other considerations.

**Benchmark Overview**

The benchmark measures the performance of two approaches to filter out null values from arrays: using `push` and using `reduce`. The test cases have different array sizes: `bigArr` (1000 elements), `smallArr` (10 elements), and `vSmallArr` (2 elements).

**Test Cases**

Each test case has a similar structure:

1. An array is created with null values.
2. A loop iterates over the array, and for each element:
	* If the element is not null, it's pushed onto an empty result array using `push`.
	* Alternatively, if the element is not null, it's added to an accumulator array using `reduce`.

**Comparison Options**

There are two main approaches being compared:

1. **Push**: Using `push` to add elements to a result array.
2. **Reduce**: Using `reduce` with a callback function to accumulate elements into an array.

**Pros and Cons of Each Approach:**

* **Push**:
	+ Pros:
		- Simple and easy to understand.
		- Fast in terms of adding elements to an existing array.
	+ Cons:
		- May incur overhead when creating an empty result array on each iteration.
		- Can lead to a large result array if not used efficiently (e.g., with sparse arrays).
* **Reduce**:
	+ Pros:
		- Efficient in terms of accumulating elements into an existing array.
		- Can handle sparse arrays more effectively than `push`.
	+ Cons:
		- May require more complex implementation, making it harder to understand and optimize.
		- May incur overhead when creating an empty accumulator array on each iteration.

**Library: null**

The test cases use the `null` keyword to represent null values in the arrays. The purpose of using `null` is to simulate a scenario where some elements are missing or invalid data.

**Special JS Feature/Syntax: None**

There are no special JavaScript features or syntaxes being used in this benchmark.

**Other Considerations:**

* **Array Sparsity**: The test cases use sparse arrays, which means that some elements may be missing. This can affect the performance of both `push` and `reduce`.
* **Result Array Allocation**: The `push` approach allocates a new result array on each iteration, while the `reduce` approach accumulates elements into an existing accumulator array.
* **Browser Variability**: The benchmark results are reported for multiple browsers and devices, which can introduce variability in performance.

**Alternatives:**

Other approaches to filter out null values from arrays include:

1. Using `filter()`: This method creates a new array with only the elements that pass the test (i.e., non-null values).
2. Using `map()`: This method creates a new array with the transformed elements, without removing null values.
3. Using `forEach()`: This method executes a callback function on each element in the array, allowing for filtering and transformation.

Each of these alternatives has its own pros and cons, which may affect performance depending on the specific use case.

Related benchmarks:

filtering array with push vs reduce with fewer elements (version: 0)

Comparing performance of: filter with push (bigArr) vs filter with reduce (bigArr) vs filter with push (smallArr) vs filter with reduce (smallArr) vs filter with push (vSmallArr) vs filter with reduce (vSmallArr)

Created: one year ago by: Guest

Jump to the latest result

filter with push (bigArr)

filter with reduce (bigArr)

filter with push (smallArr)

filter with reduce (smallArr)

filter with push (vSmallArr)

filter with reduce (vSmallArr)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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