Run results for: find() vs for...of vs for-loop BIG

Run details:

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:90.0) Gecko/20100101 Firefox/90.0

Browser: Firefox 90

Operating system: Ubuntu

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
for	52731.2 Ops/sec
for of	92228.6 Ops/sec
find	179119.5 Ops/sec
for each	132150.0 Ops/sec

HTML Preparation code:

<div id='test'></div>

Tests:

for
var arr = ['hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'b']; let val; for(i=0; i<arr.length; i++){ var value = arr[i]; if (value === 'b') { val = value; break; } }
for of
var arr = ['hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'b']; let val; for (var value of arr) { if (value === 'b') { val = value; break; } }
find
var arr = ['hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'b']; let val = arr.find(node => node.id === 'b');
for each
var arr = ['hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'hello', 'a', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'b']; let val; arr.forEach( value => { if (value === 'b') { val = value; } });

Run results for: find() vs for...of vs for-loop BIG

Testing the difference between native loops and find()

for

for of

find

for each