Why is accessing an array's element by its index slower than using the .find() function?

Question

For the particular case below, it seems using the .find function is significantly faster than simply using the element's index. Why is this?

beacuse .find() performs a search and index is a straight address of the value in the array?! — Andrew
– Andrew, Commented Aug 1, 2017 at 10:53
This test seems flawed. Finding any of those values anyway you care to mention (there's only 4 of them) is going to practically instantaneous.My guess is the times are so tiny that whatever performance tool your using can't measure them accurately. — Liam
– Liam, Commented Aug 1, 2017 at 10:55
@blewherself So you are saying search is supposed to be slower? Seems to me like you misread the question. — Jonah
– Jonah, Commented Aug 1, 2017 at 10:56

Nina Scholz · Accepted Answer · 2017-08-01 11:07:28Z

You could use a different approach by using a random number to find the object.

Index:

var i = Math.floor(Math.random() * 10), o = array[i];

vs Find:

var i = Math.floor(Math.random() * 10), o = array.find(o => o.id === i);

with shared data

var array = [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }, { id: 8 }, { id: 9 }];

Then you get from jsperf (with EDGE):

Index: 31,707,818 ±0. 92% fastest Find: 5,001,388 ±1.51% 84% slower

Conclusion

Index access is faster then using Array#find.

The randomness must be what did it, because I did another .find test case with a 100K element array and the two tests were extremely close (78 ops per sec vs 82 ops per sec). Perhaps .find is doing some sort of caching?

Alexander Elgin · Accepted Answer · 2017-08-01 11:09:53Z

Both samples took less than 0ms

var now = new Date(); var items = [{id: 0}, {id: 1}, {id: 2}, {id: 3}]; var item = items[2]; document.write((new Date().getTime() - now.getTime()) + 'ms');

var now = new Date(); var items = [{id: 0}, {id: 1}, {id: 2}, {id: 3}]; var item = items.find(e => e.id === 2); document.write((new Date().getTime() - now.getTime()) + 'ms');

But with 100K array size the picture is different

var items = []; for(var id = 0; id < 100000; id++) { items.push({id: id}); } var now = new Date(); var item = items[99999]; document.write((new Date().getTime() - now.getTime()) + 'ms');

var items = []; for(var id = 0; id < 100000; id++) { items.push({id: id}); } var now = new Date(); var item = items.find(e => e.id === 99999); document.write((new Date().getTime() - now.getTime()) + 'ms');

As you can see of course direct access by index is much faster because the find method should check many items before it finds the correct one. I.e. the topic starter assumption (that direct access by index is slower than find method) is obviously incorrect

It's also going to alter depending on what element your searching for finds complexity is O(1) at it's most efficient and O(n) at it's least. items[999] will be O(1) always

Collectives™ on Stack Overflow

Why is accessing an array's element by its index slower than using the .find() function?

2 Answers 2

1 Comment

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Related