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

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

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) {
            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) {            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: 25 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0

Browser/OS: Firefox 135 on Windows

View result in a separate tab

Test name	Executions per second
Array.filter	22628.4 Ops/sec
for, continue	85237.8 Ops/sec
for, condition	79578.9 Ops/sec
for..of	22083.7 Ops/sec
Array.reduce	27311.7 Ops/sec
generator, spread	2238.9 Ops/sec

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

I'll break down the benchmark and its test cases for you.

Benchmark Overview

The benchmark compares four different approaches to filter an array of 10,000 random numbers:

Array.filter()
A traditional for loop with continue
A traditional for loop without continue
The for...of loop
Array.reduce()
Generator spread ([...generator()])

Library and Special JS Features

No specific library is used in the benchmark, but it does use modern JavaScript features such as arrow functions, template literals (in the HTML preparation code), and generator functions.
The benchmark uses JavaScript 2015+ syntax, including const, let, var with Destructuring assignment.

Test Case Analysis

Here's a brief analysis of each test case:

Array.filter(): This is the built-in filter method of the Array prototype in JavaScript. It takes a callback function as an argument and returns a new array containing only the elements that pass the test.
For, continue: This traditional for loop iterates over the array using an index variable, checking each element against the target value and skipping it if necessary.
For, condition: Similar to the previous one, but with a conditional statement instead of continue.
For...of: This modern for loop uses the for...of construct to iterate over the array, which is more concise and expressive than traditional indexing.
Array.reduce(): This method applies a reducer function to each element in the array, accumulating a result. In this case, it filters the elements by checking if they meet the target value condition.
Generator spread: This test case uses generator functions with yield and ... to create an iterable sequence that can be converted to an array using the spread operator ([...]).

Comparison

The benchmark measures the execution speed of each approach, with Chrome 114 as the executing browser. The results show that:

Generator spread is the fastest
Array.filter() is faster than traditional loops (both for, continue and for, condition)
For...of loop is slower than Array.filter()
Array.reduce() is slowest among all approaches

Interpretation

The results suggest that:

The built-in Array.filter() method is efficient due to its optimized implementation.
Generator spread is a good alternative when working with large datasets, as it can provide better performance and memory efficiency compared to traditional loops.
Traditional loops (both for, continue and for, condition) are slower but still suitable for smaller datasets or when specific control flow is required.

Keep in mind that this benchmark is specific to Chrome 114 and may not generalize to other browsers or environments.

LLMs can make mistakes. Check important info.

I'll break down the benchmark and its test cases for you.

**Benchmark Overview**

The benchmark compares four different approaches to filter an array of 10,000 random numbers:

1. `Array.filter()`
2. A traditional `for` loop with `continue`
3. A traditional `for` loop without `continue`
4. The `for...of` loop
5. `Array.reduce()`
6. Generator spread (`[...generator()]`)

**Library and Special JS Features**

* No specific library is used in the benchmark, but it does use modern JavaScript features such as arrow functions, template literals (in the HTML preparation code), and generator functions.
* The benchmark uses JavaScript 2015+ syntax, including `const`, `let`, `var` with Destructuring assignment.

**Test Case Analysis**

Here's a brief analysis of each test case:

1. **Array.filter()**: This is the built-in filter method of the Array prototype in JavaScript. It takes a callback function as an argument and returns a new array containing only the elements that pass the test.
2. **For, continue**: This traditional `for` loop iterates over the array using an index variable, checking each element against the target value and skipping it if necessary.
3. **For, condition**: Similar to the previous one, but with a conditional statement instead of `continue`.
4. **For...of**: This modern `for` loop uses the `for...of` construct to iterate over the array, which is more concise and expressive than traditional indexing.
5. **Array.reduce()**: This method applies a reducer function to each element in the array, accumulating a result. In this case, it filters the elements by checking if they meet the target value condition.
6. **Generator spread**: This test case uses generator functions with `yield` and `...` to create an iterable sequence that can be converted to an array using the spread operator (`[...]`).

**Comparison**

The benchmark measures the execution speed of each approach, with Chrome 114 as the executing browser. The results show that:

* Generator spread is the fastest
* `Array.filter()` is faster than traditional loops (both `for, continue` and `for, condition`)
* `For...of` loop is slower than `Array.filter()`
* `Array.reduce()` is slowest among all approaches

**Interpretation**

The results suggest that:

* The built-in `Array.filter()` method is efficient due to its optimized implementation.
* Generator spread is a good alternative when working with large datasets, as it can provide better performance and memory efficiency compared to traditional loops.
* Traditional loops (both `for, continue` and `for, condition`) are slower but still suitable for smaller datasets or when specific control flow is required.

Keep in mind that this benchmark is specific to Chrome 114 and may not generalize to other browsers or environments.

Related benchmarks: