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: 10 months 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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 10 months 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	2074.8 Ops/sec
for, continue	1061.0 Ops/sec
for, condition	1063.3 Ops/sec
for..of	1937.3 Ops/sec
Array.reduce	2051.3 Ops/sec
generator, spread	3149.5 Ops/sec

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

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

Created: 10 months ago by: Guest

Jump to the latest result

Array.filter

for, continue

for, condition

for..of

Array.reduce

generator, spread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A