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]); }

Historical Performance Data aggregated from 127 community runs

Desktop Results:

Chrome 107 runs

Filter

6.4M/s

For 2

865K/s

For

831K/s

For in

658K/s

Fastest: Filter (9.7x faster)

View exact numbers

✓ Filter: 6,388,497 ops/sec
• For 2: 864,946 ops/sec
• For: 831,199 ops/sec
• For in: 657,525 ops/sec

Firefox 11 runs

Filter

10.7M/s

For

2.9M/s

For 2

2.1M/s

For in

598K/s

Fastest: Filter (17.8x faster)

View exact numbers

✓ Filter: 10,658,021 ops/sec
• For: 2,872,224 ops/sec
• For 2: 2,089,244 ops/sec
• For in: 597,504 ops/sec

Mobile Results:

Chrome 9 runs

Filter

3.1M/s

For

488K/s

For 2

485K/s

For in

378K/s

Fastest: Filter (8.1x faster)

View exact numbers

✓ Filter: 3,050,275 ops/sec
• For: 487,689 ops/sec
• For 2: 485,440 ops/sec
• For in: 378,098 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0.1 Safari/605.1.15

Browser/OS: Safari 26 on Mac OS X 10.15.7

View result in a separate tab

Filter

67.6M/s

For

7.4M/s

For 2

1.4M/s

For in

604K/s

View exact numbers

Test name	Executions per second
✓ Filter	67,621,840 Ops/sec
For	7,431,169 Ops/sec
For 2	1,408,836 Ops/sec
For in	604,076 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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).

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

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

Created: 9 years ago by: Registered User

Go to the latest result

Filter

For

For 2

For in

Historical Performance Data aggregated from 127 community runs

Desktop Results:

Chrome 107 runs

Firefox 11 runs

Mobile Results:

Chrome 9 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

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

Created: 9 years ago by: Registered User

Go to the latest result

Filter

For

For 2

For in

Historical Performance Data aggregated from 127 community runs

Desktop Results:

Chrome 107 runs

Firefox 11 runs

Mobile Results:

Chrome 9 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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