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

Run details: (Test run date: one year 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 one year ago):

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: