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

Script Preparation code:

var arr = [1,2,3,4,null,5,6,"7",8,{a:2},0], farr=[], i,len;

Tests:

Filter
farr = arr.filter(function(item) { return (item>4); });
For
for (i=0,len=arr.length;i<len;i++) { if (arr[i]<5) continue; farr.push(arr[i]); }
For 2
for (i=0,len=arr.length;i<len;i++) { if (arr[i]>4) farr.push(arr[i]); }
For in
for (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: 2025 years ago)

User agent: Mozilla/5.0 (Linux; Android 8.0.0; Build/OPR6.170623.013) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.111 Mobile Safari/537.36

Browser/OS: Chrome Mobile 63 on Android 8.0.0

View result in a separate tab

Test name	Executions per second
Filter	366568.2 Ops/sec
For	43751.9 Ops/sec
For 2	47351.9 Ops/sec
For in	61248.9 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The benchmark is comparing three different approaches to filter an array in JavaScript:

1. **Array Filter**: Using the `filter()` method with a callback function.
2. **For Loop**: Using a traditional for loop with an index variable `i`.
3. **For Loop with For-In**: Using a for loop with the `for...in` syntax, which iterates over the array's properties (including numeric indices).

**Options Compared**

The three options are being compared to determine which one is the fastest. Here's a brief summary of each option:

* **Array Filter**: This method uses the `filter()` method and a callback function to create a new array with only the elements that pass the test.
* **For Loop**: This method uses a traditional for loop with an index variable `i` to iterate over the array elements. The loop checks each element against a condition, and if it passes, the element is added to a new array `farr`.
* **For Loop with For-In**: This method uses a for loop with the `for...in` syntax to iterate over the array's properties (including numeric indices). However, this approach can be slower than the other two because it iterates over all properties of the array object, including non-enumerable ones.

**Pros and Cons**

Here are some pros and cons of each approach:

* **Array Filter**: Pros:
	+ Easy to read and maintain
	+ Fast and efficient
Cons: None notable.
* **For Loop**: Pros:
	+ Can be optimized for specific use cases
	+ Allows for manual control over the loop iteration
Cons:
	+ Can be verbose and hard to read for complex conditions
	+ May not be as fast as Array Filter due to overhead of indexing and array manipulation
* **For Loop with For-In**: Pros: None notable.
Cons:
	+ May be slower due to iteration over all properties of the array object
	+ Can lead to unexpected behavior if non-enumerable properties are present

**Library and Special JS Features**

In this benchmark, no libraries or special JavaScript features are being tested. However, it's worth noting that `for...in` syntax can interact with other aspects of JavaScript, such as prototype chains and object property inheritance.

**Benchmark Preparation Code**

The preparation code sets up the test array `arr` and creates a new empty array `farr`. The script preparation code includes the line `i=len;`, which initializes a variable `i` to the length of the array. This line is used in both for loop variants.

**Individual Test Cases**

Each test case represents a single benchmark iteration:

* **Filter**: This test case uses Array Filter with a callback function.
* **For**: This test case uses a traditional for loop with an index variable `i`.
* **For 2**: This test case is similar to the previous one, but with a slight modification (the loop condition).
* **For in**: This test case uses the for...in syntax to iterate over the array's properties.

**Latest Benchmark Result**

The latest benchmark result shows the execution times per second for each test case on various browsers and devices. The results suggest that Array Filter is generally the fastest approach, followed closely by traditional For Loop.

**Other Alternatives**

If you're interested in exploring alternative approaches to this benchmark, here are a few examples:

* **Using `forEach()`**: You could use the `forEach()` method instead of Array Filter, which would eliminate the need for a callback function.
* **Using `map()`**: Another approach would be to use the `map()` method, which can create a new array with transformed elements.

Related benchmarks:

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

This version declares i once before

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

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