Benchmark: Array filter vs for ...of loop

Script Preparation code:

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

Tests:

Filter
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]; const far = []; farr = arr.filter(function(item) { return (item>4); });
For ... of
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]; const far = []; for (const item of arr) { if (item > 4) { farr.push(item); } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Filter
For ... of

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Browser/OS: Chrome 121 on Windows

View result in a separate tab

Test name	Executions per second
Filter	5221698.5 Ops/sec
For ... of	1535900.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark test.

**What is being tested?**

The provided JSON represents two individual test cases, comparing the performance of:

1. **Array filter**: A traditional `filter()` method on an array to create a new array with only the elements that meet a certain condition (in this case, filtering out elements greater than 4).
2. **For...of loop**: Using a for-of loop to iterate over the array and push elements into a new array if they meet the same condition as in the filter method.

**Options compared**

The two options being compared are:

* **Array filter**: A built-in JavaScript method that creates a new array with only the elements that pass the test implemented by the provided function.
* **For...of loop**: An iterator-based approach where we iterate over the original array and push elements into a new array if they meet the condition.

**Pros and Cons of each approach:**

1. **Array filter**:
	* Pros:
		+ Concise and expressive syntax
		+ Easy to read and maintain
		+ Works with arrays and sets (not limited to arrays)
	* Cons:
		+ Creates a new array, which can be memory-intensive for large datasets
		+ May not be suitable for certain use cases where side effects are not allowed (e.g., modifying the original array)
2. **For...of loop**:
	* Pros:
		+ More control over the iteration process and filtering conditions
		+ Can work with more complex data structures, like arrays with nested elements
		+ May be more efficient for large datasets or when memory is limited
	* Cons:
		+ Requires explicit handling of edge cases (e.g., empty array, null values)
		+ Can result in less concise and less readable code

**Library used**

There is no specific library used in these test cases. Both methods rely on built-in JavaScript features.

**Special JS feature or syntax**

Neither of the two options relies on special JavaScript features or syntax that would impact the benchmark results.

**Benchmark preparation code**

The provided Script Preparation Code defines an array `arr` and initializes an empty array `farr`. This setup allows us to run the filter method and for-of loop comparison directly in the test environment.

**Other alternatives**

For larger datasets or performance-critical applications, alternative approaches might be considered:

1. **Use a library**: Libraries like Lodash or Ramda provide optimized filtering methods that can outperform built-in JavaScript `filter()`.
2. **Caching mechanisms**: Implementing caching to avoid re-running the filter method for every iteration.
3. **Parallel processing**: Using web workers, parallel execution, or async/await to execute the filter method concurrently.

Keep in mind that these alternatives would likely require more complex setup and may not be relevant for this specific microbenchmark.

Related benchmarks:

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

Array filter vs for ...of loop Comparing performance of:

Comparing performance of: Filter vs For ... of

Created: one year ago by: Guest

Jump to the latest result

Filter

For ... of

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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