Benchmark: Array.filter vs. raw for-loop vs. for..of vs. Array.reduce vs. generator spread 2

Array.filter vs. raw for-loop vs. for..of vs. Array.reduce vs. generator spread 2 (version: 0)

Changes in version 2: - Actually call predicate in generator function. Changes in this fork include (but might not be limited to): - Complete refactoring - Fixed memory leak - Even if you didn't run out of memory this still heavily affected performance, rendering the results basically useless. - Attempted to make test cases less likely to be optimized away (larger array, randomized values) - Changed for..in to for..of - One shouldn't use for..in for array access. It doesn't behave like other loops in that: 1. It returns all enumerable properties in the entire prototype chain. Usually not a problem, but if you're using inheritance it might. 2. It doesn't visit empty slots. So if you created a sized array (i.e. new Array(123)) and looped over it with for..in it would visit exactly 0 slots. 3. It returns indexes as strings. Could cause subtle bugs since it would work with abstract comparison operators more or less as though it was a number, but not so much with, for instance, the + operator. - Added Array.reduce test - Added generator test

Comparing performance of: Array.filter vs for, continue vs for, condition vs for..of vs Array.reduce vs generator, spread

Created: 2 years ago by: Guest

Jump to the latest result

Script Preparation code:

var arr  = Array.from({ length: 10000 }, Math.random);
var TARGET_VALUE = 0.95;

function* filter(iter, f) {
    for (const it of iter) {
        if (f(it)) {
            yield it;
        }
    }
}

Tests:

Array.filter
return arr.filter(x => x >= TARGET_VALUE);
for, continue
const farr = []; for (let i = 0, len = arr.length; i < len; ++i) { if (arr[i] < TARGET_VALUE) { continue; } farr.push(arr[i]); } return farr;
for, condition
const farr = []; for (let i = 0, len = arr.length; i < len; ++i) { if (arr[i] >= TARGET_VALUE) { farr.push(arr[i]); } } return farr;
for..of
const farr = []; for (const x of arr) { if (x >= TARGET_VALUE) { farr.push(x); } } return farr;
Array.reduce
return arr.reduce( (a, b) => { if (b >= TARGET_VALUE) { a.push(b); } return a; }, [], );
generator, spread
return [...filter(arr, x => x >= TARGET_VALUE)];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.filter
for, continue
for, condition
for..of
Array.reduce
generator, spread

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of different approaches for filtering an array in JavaScript:

1. `Array.filter`
2. For loop with `continue` statement
3. For loop with conditional statement
4. `for..of` loop
5. `Array.reduce` method
6. Generator function with spread syntax

**Options Compared**

The benchmark compares the performance of each option across multiple executions, providing an idea of which approach is faster in different scenarios.

**Pros and Cons of Each Approach**

1. **`Array.filter`**:
	* Pros: Concise, expressive, and easy to read.
	* Cons: May be slower than other approaches due to additional function calls.
2. **For loop with `continue` statement**:
	* Pros: Control over individual elements, potentially faster than other methods.
	* Cons: More verbose, less readable than other options.
3. **For loop with conditional statement**:
	* Pros: Similar to previous option but with a more concise syntax.
	* Cons: Still more verbose than `Array.filter` and may be slower.
4. **`for..of` loop**:
	* Pros: Concise, easy to read, and similar to `Array.prototype.forEach()`.
	* Cons: May not work as expected if used with array-like objects or prototype chains.
5. **`Array.reduce` method**:
	* Pros: Functional programming style, can be more memory-efficient.
	* Cons: More complex syntax, may not be suitable for all use cases.
6. **Generator function with spread syntax**:
	* Pros: Concise, expressive, and functional programming style.
	* Cons: May be less readable than other options due to the use of a generator function.

**Additional Considerations**

* The `Array.filter` method is expected to be slower than other approaches because it creates an intermediate array with the filtered elements.
* For loops can be faster if used with control statements like `continue`, as they allow for more precise control over individual elements.
* `for..of` loops are a concise way to iterate over arrays, but their behavior may differ when used with array-like objects or prototype chains.
* The `Array.reduce` method is useful when working with accumulators or functional programming principles.

**Benchmark Results**

The provided benchmark results show the execution rate (executions per second) for each option. The top three performers are:

1. `for..of` loop: 1932 executions/second
2. Generator function with spread syntax: 1786 executions/second
3. For loop with `continue` statement: 1078 executions/second

Note that these results may vary depending on the specific use case, array size, and JavaScript engine being used.

Overall, the benchmark highlights the importance of choosing an efficient approach for filtering arrays in JavaScript, taking into account factors like readability, maintainability, and performance.

Related benchmarks: