Benchmark: filter vs for..of

Script Preparation code:

var array = [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10]

Tests:

filter
array.filter(n => n === 9)
for..of
resultList = []; for(const i of array) { if(i === 9) { resultList.push(i); } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
filter
for..of

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

Browser/OS: Chrome 115 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
filter	4228827.0 Ops/sec
for..of	631964.4 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided benchmark, hosted on MeasureThat.net, compares the performance of two approaches to filter an array in JavaScript: `Array.prototype.filter()` and a traditional `for...of` loop.

**What is tested?**

* `Array.prototype.filter()`: This method takes a callback function as its first argument and returns a new array with all elements that pass the test.
* Traditional `for...of` loop: This approach uses a `for...of` loop to iterate over each element of the array, checking if it matches the condition.

**Options compared**

The benchmark compares the following options:

1. **`Array.prototype.filter()`**: A concise and expressive method for filtering arrays.
2. **Traditional `for...of` loop**: An older approach that requires more code but can be optimized for performance.

**Pros and Cons**

**`Array.prototype.filter()`**

Pros:

* Concise and readable syntax
* Easy to understand and maintain
* Optimized by the JavaScript engine

Cons:

* May incur additional overhead due to method calls and array creation
* Can be slower than traditional loops in some cases (but usually not)

**Traditional `for...of` loop**

Pros:

* Can be optimized for performance with good indexing and caching
* Allows for more control over iteration and condition checks
* No overhead from method calls or array creation

Cons:

* More verbose and harder to read compared to `filter()`
* Requires manual memory management (no garbage collection)

**Other considerations**

The benchmark uses a single test case for each approach: filtering an array of 100 elements to find the first occurrence of the number 9. The test is run on both Chrome 115 and MeasureThat.net's own browser.

**Library usage**

In this benchmark, no libraries are used beyond the built-in `Array.prototype.filter()` method. However, if a library like Lodash were used, it might provide additional filtering methods that could be compared in future benchmarks.

**Special JS feature or syntax**

There is no special JavaScript feature or syntax used in this benchmark. The focus is on comparing two common approaches to filtering arrays in JavaScript.

**Alternatives**

Other alternatives for filtering arrays include:

1. `Array.prototype.every()` and `Array.prototype.some()`: These methods can be used with a callback function to filter arrays.
2. Regular expressions: Arrays can be filtered using regular expressions, but this approach is less common and often slower than the above options.
3. Other libraries like Lodash or Ramda, which provide more advanced filtering functions.

Keep in mind that the best approach depends on the specific use case and performance requirements. This benchmark provides a simple comparison of two common methods for filtering arrays in JavaScript.

Related benchmarks:

filter vs for..of (version: 0)

Comparing performance of: filter vs for..of

Created: one year ago by: Guest

Jump to the latest result

filter

for..of

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