MeasureThat.net

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

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

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/114.0
Firefox 114
Windows
Desktop
one year ago
Test name Executions per second
Array.filter 20346.7 Ops/sec
for, continue 68550.6 Ops/sec
for, condition 69394.4 Ops/sec
for..of 19424.3 Ops/sec
Array.reduce 20445.6 Ops/sec
generator, spread 1590.8 Ops/sec
Script Preparation code:
​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);

  • 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)];