Benchmark: Array filter vs. for loop - with for in (10k)

Script Preparation code:

var arr = Array.from({length: 10000}, () => Math.floor(Math.random() * 10)), 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: 2 years 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	6748.1 Ops/sec
For	494.8 Ops/sec
For 2	487.4 Ops/sec
For in	421.7 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 JSON and explain what's being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark is designed to compare the performance of three different approaches for filtering an array:

1. **Array filter**: Using the `filter()` method with a callback function.
2. **For loop with index comparison**: Using a traditional `for` loop that iterates over the array indices and compares each element to the desired threshold (in this case, 4).
3. **For loop with object iteration**: Using a `for...in` loop that iterates over the array elements themselves.

**Library and Syntax Considerations**

In all test cases, the `Array.from()` method is used to create an array of 10,000 random integers. This suggests that JavaScript's built-in support for arrays and their methods (like `Array.from()`) are being tested.

There is no mention of any special JavaScript features or syntax in the benchmark code. However, it's worth noting that some older browsers might not support all modern JavaScript features, so results may vary depending on the target audience.

**Comparison Options**

The three comparison options are:

1. **Array filter**: This method uses a callback function to iterate over the array and returns a new array with only the elements that pass the test (i.e., `item > 4`).
2. **For loop with index comparison**: This method uses a traditional `for` loop to iterate over the array indices, comparing each element to the desired threshold.
3. **For loop with object iteration**: This method uses a `for...in` loop to iterate over the array elements themselves.

**Pros and Cons of Each Approach**

Here's a brief summary:

* **Array filter**:
	+ Pros: concise, efficient, and easy to read.
	+ Cons: may not be optimized for older browsers or very large arrays.
* **For loop with index comparison**:
	+ Pros: widely supported, works in most environments.
	+ Cons: can be slower than array filter due to indexing overhead.
* **For loop with object iteration**:
	+ Pros: avoids potential issues with indexed arrays (e.g., `NaN` values).
	+ Cons: less readable and maintainable than array filter.

**Other Alternatives**

If you were to consider alternative approaches, some options might include:

1. **Using a `forEach()` loop**: While not as efficient as array filter or traditional `for` loops, `forEach()` can provide a concise and easy-to-read way to iterate over arrays.
2. **Using a library like Lodash**: Lodash provides a wide range of utility functions for working with arrays, including filtering and mapping.
3. **Using a specialized filtering library**: Libraries like Fastify or Highcharts might offer optimized filtering algorithms that can outperform the benchmark's results.

However, it's worth noting that these alternatives are likely to change the overall shape of the benchmark and its focus on comparing specific JavaScript methods.

Related benchmarks:

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

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

Created: 2 years ago by: Guest

Jump to the latest result

Filter

For

For 2

For in

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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