Benchmark: for loop filter vs native array.filter

Script Preparation code:

var array = [...Array(100000).keys()];

function fastFilter(arrayToFilter, cb) {
    const stack = []

    for (let i = 0; i < arrayToFilter.length; i += 1) {
        const item = arrayToFilter[i]

        if (cb(item, i)) {
            stack.push(item)
        }

    }

    return stack
}

Tests:

Array.prototype.filter
array.filter(n => n === 99999)
for loop filter
fastFilter(array, n => n === 99999)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.filter
for loop filter

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.filter	2242.9 Ops/sec
for loop filter	15007.3 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided benchmark compares two approaches to filtering an array of numbers in JavaScript:

1. **Native Array.prototype.filter**: This is the built-in method provided by the JavaScript language, which creates a new array with all elements that pass the test implemented by the provided function (`n => n === 99999`).
2. **Custom `fastFilter` function**: This is a custom implementation of a filtering function written in JavaScript. It uses a stack-based approach to iterate over the array and push elements that pass the test.

**Options Compared**

The benchmark compares two options:

* **Native Array.prototype.filter**: This is the built-in method provided by the JavaScript language.
* **Custom `fastFilter` function**: This is a custom implementation of a filtering function written in JavaScript.

**Pros and Cons**

### Native Array.prototype.filter

Pros:

* Efficient: Built-in methods are optimized for performance and are usually the fastest way to achieve a task.
* Easy to use: Simply call the method on an array and pass a callback function to test each element.

Cons:

* Limited control: The built-in method can be limited in terms of customization, as it is designed to work with specific types of data.
* Overhead: Creating a new array can lead to increased memory usage and slower performance compared to in-place filtering methods.

### Custom `fastFilter` function

Pros:

* Fine-grained control: Allows for precise control over the filtering process, including iteration order and element processing.
* In-place filtering: Can potentially reduce memory usage by avoiding the creation of a new array.

Cons:

* More complex: Requires manual implementation of the filtering logic, which can be error-prone and harder to optimize.
* Performance overhead: The custom implementation may incur additional overhead due to the lack of optimization and caching.

**Library Usage**

In this benchmark, neither library is explicitly used. However, JavaScript's built-in `Array.prototype.filter` method relies on various libraries and implementations under the hood, such as:

* The ECMAScript standard specification
* Browser-specific optimizations and caching mechanisms

**Special JS Features or Syntax**

None are mentioned in this specific benchmark.

**Other Alternatives**

For filtering arrays, other approaches could include:

* **Using `forEach()`**: Iterate over the array using a callback function, which can be useful for tasks that require iteration but don't need to filter out elements.
* **Using `map()` and `filter()` combination**: Apply the `map()` method to create a new array with transformed elements, and then apply the `filter()` method to remove unwanted elements.
* **Using `reduce()`**: Use the accumulator-based reduction function to process elements in the array.

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

Related benchmarks:

for loop filter vs native array.filter (version: 0)

Comparing performance of: Array.prototype.filter vs for loop filter

Created: 3 years ago by: Guest

Jump to the latest result

Array.prototype.filter

for loop filter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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