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

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 in arr) { if (arr[i]>4) farr.push(arr[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: one month ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:136.0) Gecko/20100101 Firefox/136.0

Browser/OS: Firefox 136 on Linux

View result in a separate tab

Test name	Executions per second
Filter	10658021.0 Ops/sec
For	2886177.0 Ops/sec
For 2	2162296.8 Ops/sec
For in	630407.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

The benchmark is comparing four different approaches to filter an array of numbers, which contains both positive and negative integers:

1.  **Filter method**: This approach uses the `Array.prototype.filter()` method, which returns a new array with all elements that pass the test implemented by the provided function.
2.  **For loop**: This approach uses a traditional for loop to iterate over the array and push elements that meet the condition into a new array (`farr`).
3.  **For loop (shortened version)**: This is similar to the previous loop, but it's more concise by omitting the `len` variable.
4.  **For...in loop**: This approach uses the `for...in` statement to iterate over the array properties and push elements that meet the condition into a new array (`farr`).

**Pros and Cons of each approach:**

*   **Filter method**: Pros - concise, efficient, and easy to read. Cons - may have performance issues if used with large arrays or in older browsers.
*   **For loop**: Pros - widely supported, can be optimized for specific use cases. Cons - less readable than filter or other approaches.
*  **For loop (shortened version)**: Similar pros and cons as the previous loop, but more concise.
*  **For...in loop**: Pros - simple to implement, works with arrays of any size. Cons - may not be the most efficient due to its dynamic nature.

**Library and purpose:** None are explicitly used in this benchmark.

**Special JS features or syntax:** The `for...in` loop is using a deprecated feature (as of ECMAScript 2015) that can iterate over object properties, but it's still supported for compatibility reasons. In modern JavaScript, you would typically use `for...of` instead.

**Other alternatives:**

*   **Using `map()`**: This method returns a new array with the results of applying a provided function on every element in this array.
*   **Using `forEach()`**: This method executes a provided function once for each array element, without returning any value.
*   **Native WebAssembly (WASM) functions**: These can be optimized for performance and are gaining traction in modern browsers.

The current benchmark seems to be using the most straightforward approach, which is suitable for understanding the basic concept of filtering arrays. However, considering real-world scenarios or optimizing for specific use cases might require exploring alternative methods like `map()` or custom native code (WASM).

Related benchmarks:

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

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

Created: 8 years ago by: Registered User

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 6 months ago):