Benchmark: Array filter vs. for loop - with for of

Script Preparation code:

var arr = [1,2,3,4,5,6,7,8,9,0], farr;

Tests:

Filter
farr = arr.filter(function(item) { return (item>4); });
For
for (var i=0,len=arr.length;i<len;i++) { if (arr[i]<5) continue; farr.push(arr[i]); }
For 2
for (var i=0,len=arr.length;i<len;i++) { if (arr[i]>4) farr.push(arr[i]); }
For in
for (var i of arr) { if (i) farr.push(i); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Filter
For
For 2
For in

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Browser/OS: Chrome 123 on Linux

View result in a separate tab

Test name	Executions per second
Filter	3515053.5 Ops/sec
For	532462.6 Ops/sec
For 2	534549.6 Ops/sec
For in	915611.4 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to explain the JavaScript microbenchmark on MeasureThat.net.

**Benchmark Overview**

The benchmark compares the performance of three different approaches for filtering an array in JavaScript:

1. Using the `filter()` method with a callback function.
2. Using a traditional `for` loop to iterate over the array and filter out elements that don't meet the condition.
3. Using a `for...of` loop to iterate over the array.

**Options Compared**

The benchmark compares the performance of these three approaches on an input array `[1, 2, 3, 4, 5, 6, 7, 8, 9, 0]`. The `filter()` method uses a callback function to filter out elements that are not greater than 4. The traditional `for` loop uses an index variable `i` to iterate over the array and filters out elements that are less than 5. The `for...of` loop uses a foreach iterator to iterate over the array and filters out elements that are falsy (including 0).

**Pros and Cons of Each Approach**

1. **Filter() method**: This approach is concise and expressive, as it leverages the built-in filtering functionality of the `filter()` method. However, its performance may be impacted by the overhead of the callback function.
2. **Traditional for loop**: This approach is simple and easy to understand, but it can be verbose and may lead to errors if not implemented correctly. Its performance is generally better than the `filter()` method, especially for small arrays.
3. **For...of loop**: This approach is concise and efficient, as it avoids the overhead of an index variable. However, its performance may vary depending on the JavaScript engine's support for foreach iterators.

**Library Used**

The benchmark uses the built-in filtering functionality of the `filter()` method, which is a part of the ECMAScript standard.

**Special JS Features or Syntax**

There are no special features or syntax used in this benchmark that would require additional explanation. The focus is on comparing the performance of different array filtering approaches.

**Other Alternatives**

There are other ways to filter an array in JavaScript, such as using `map()` and `filter()` together:

`arr.filter(item => item > 4).map(item => item);`

Another approach is to use the `every()` method with a callback function:

`arr.every(item => item > 4);`

However, these alternatives are not compared in this benchmark.

In summary, this benchmark provides a useful comparison of different array filtering approaches in JavaScript, highlighting the trade-offs between conciseness, performance, and simplicity.

Related benchmarks:

Array filter vs. for loop - with for of (version: 0)

Comparing performance of: Filter vs For vs For 2 vs For in

Created: one year ago by: Guest

Jump to the latest result

Filter

For

For 2

For in

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