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: one year 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;
        }
    }
}

​x
 
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);
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;

 
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;

 
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;

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

 
return arr.reduce(    (a, b) => {        if (b >= TARGET_VALUE) {            a.push(b);        }        return a;    },    [],);

generator, spread
return [...filter(arr, x => x >= TARGET_VALUE)];
return [...filter(arr, x => x >= TARGET_VALUE)];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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:

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/114.0.0.0 Safari/537.36 Edg/114.0.1823.67

Browser/OS: Chrome 114 on Windows

View result in a separate tab

Test name	Executions per second
Array.filter	2091.5 Ops/sec
for, continue	1076.3 Ops/sec
for, condition	1078.1 Ops/sec
for..of	1932.6 Ops/sec
Array.reduce	2084.1 Ops/sec
generator, spread	1786.7 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 4 months ago):

Benchmark Overview

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

Array.filter
For loop with continue statement
For loop with conditional statement
for..of loop
Array.reduce method
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

Array.filter:
- Pros: Concise, expressive, and easy to read.
- Cons: May be slower than other approaches due to additional function calls.
For loop with continue statement:
- Pros: Control over individual elements, potentially faster than other methods.
- Cons: More verbose, less readable than other options.
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.
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.
Array.reduce method:
- Pros: Functional programming style, can be more memory-efficient.
- Cons: More complex syntax, may not be suitable for all use cases.
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:

for..of loop: 1932 executions/second
Generator function with spread syntax: 1786 executions/second
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.

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: