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: 2 years 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

Filter

5.2M/s

For ... of

1.5M/s

View exact numbers

Test name	Executions per second
✓ Filter	5,221,698 Ops/sec
For ... of	1,535,900 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.

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: 2 years ago by: Guest

Go 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):

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: 2 years ago by: Guest

Go 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):

Related benchmarks

Comparing performance of: `Filter vs For ... of`