Benchmark: Array filter performance

Script Preparation code:

var arr = [];
for (var i = 0; i < 1000; i++) {
  arr[i] = i;
}

function someFn(i) {
  return (i * 3 * 8 / 1200 * 0.002 / 40 * 0.2);
}

var sumForEach = 0,
  sumReduce = 0,
  sumMap = 0,
  sumFilter = 0,
  sumFor = 0;

Tests:

filter
arr.filter(item => (sumFilter += someFn(item)));
reduce
sumReduce = arr.reduce((lastValue, item) => { return sumReduce += someFn(item); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
filter
reduce

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; SM-G965F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 106 on Android

View result in a separate tab

Test name	Executions per second
filter	1393.1 Ops/sec
reduce	1438.6 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 provided benchmark and its test cases.

**Benchmark Overview**

The benchmark measures the performance of different JavaScript methods for filtering, mapping, reducing, and summing an array of numbers.

**Script Preparation Code**

The script preparation code creates an array `arr` with 1000 elements, each containing a unique integer value. It also defines a function `someFn` that calculates a result based on the input `i`. This function is used in multiple test cases to calculate values for filtering and reducing operations.

**Html Preparation Code**

There is no HTML preparation code provided, which means that this benchmark only tests JavaScript performance without considering any DOM-related aspects.

**Test Cases**

There are two test cases:

1. **filter**: Measures the performance of using the `filter()` method with a callback function to filter out elements from the array.
2. **reduce**: Measures the performance of using the `reduce()` method with an initial value and a callback function to reduce the array into a single value.

**Library Usage**

There is no explicit library usage in the provided benchmark code, except for built-in JavaScript methods like `filter()`, `reduce()`, `map()`, and basic arithmetic operations. However, some modern browsers may have polyfills or implementations of certain libraries that could potentially affect performance, but this is not explicitly tested in the benchmark.

**Special JS Feature/Syntax**

There are no special JavaScript features or syntax used in the benchmark code. The test cases only use standard JavaScript methods and operators.

**Options Compared**

The two main options being compared are:

1. **filter() method**: Uses the `filter()` method to create a new array with elements that pass a test (in this case, the `someFn` function returns a truthy value).
2. **reduce() method**: Uses the `reduce()` method to reduce the array into a single value by applying an accumulation function to each element.

**Pros and Cons of Each Approach**

1. **filter() method**
	* Pros:
		+ Creates a new array, which can be beneficial for performance if the original array is not modified.
		+ Allows for more flexibility in handling edge cases or filtering criteria.
	* Cons:
		+ May incur additional memory allocation and copying overhead.
2. **reduce() method**
	* Pros:
		+ Reduces memory allocation and copying, as it modifies the accumulator directly.
		+ Can be more efficient when dealing with large arrays, as it only requires a single pass through the data.
	* Cons:
		+ May require additional care when handling edge cases or initial values.

**Considerations**

When choosing between `filter()` and `reduce()`, consider the following factors:

1. **Memory allocation**: If memory is limited, `reduce()` might be more suitable as it reduces memory allocation overhead.
2. **Array size**: For large arrays, `reduce()` can be more efficient due to its single pass through the data.
3. **Filtering criteria**: If you need to apply a complex filtering condition, `filter()` might provide more flexibility and readability.

**Alternatives**

Other alternatives for filtering or reducing an array include:

1. Using `map()` and then applying conditional logic to filter out unwanted elements.
2. Implementing custom looping constructs, such as for loops or while loops.
3. Utilizing specialized libraries like Lodash or Ramda for functional programming approaches.

Keep in mind that these alternatives might introduce additional overhead or complexity, so it's essential to evaluate the specific requirements and constraints of your use case before choosing an approach.

Related benchmarks:

Array filter performance (version: 0)

Comparing performance of: filter vs reduce

Created: 4 years ago by: Guest

Jump to the latest result

filter

reduce

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