DEV Community

Discussion on: Assigning [ ] performs better than Array(n) - Reports attached.

 
svaani profile image
Vani Shivanand • Edited

In that case, let's have this code in the setup,

  let holey = new Array(2000);
  let packed = [];
  for(let i = 0; i < 20; i++) packed[i] =2
  for(let i = 0; i < 20; i++) holey[i] = 2
  for(let i = 20; i < 2000; i++) packed[i] =undefined

And this is the result,
Alt Text

Now both the arrays are of size 2000 but the packed is not holey array.

That brings another loophole in holey arrays

In holey array, even though we have not assigned any values to the array, just because of allocation, the javascript engine is trying to hit those elements.

When we use an array with new Array(2000), would we not tend to use join,reduce,map and more?

Thread Thread
 
dry profile image
Hayden Mankin

jsperf.com/test-assign-vs-push/23 looks to be the same as what you are using, however when I run it I get much different performance results:

holey vs packed

A very negligible difference.

Also speaking to your note on javascript trying to hit those empty spots, this is actually very inconsistent in javascripts implementation. Some methods skip the holes entirely, others use them.

for example, map:

let arr = new Array(10);
arr[5] = 10;
let arr2 = arr.map(n => {
console.log('test');
return n * 2;
});
console.log(arr2);

Interestingly the console output is only:

test
[empty × 5, 20, empty × 4]

meaning the callback was only run for the one index that had a value.

Thread Thread
 
svaani profile image
Vani Shivanand

I think that's because chrome team is trying optimize the holey arrays too.

Thread Thread
 
dry profile image
Hayden Mankin

You are correct, I just tested it in firefox and got the same results as your example.

Thread Thread
 
svaani profile image
Vani Shivanand • Edited

Nice discussion thread. Thank you, Hayden Mankin!

Thread Thread
 
dry profile image
Hayden Mankin

Yes! this was really interesting to explore. I hadn't even considered the differences in browsers implementations.

I still think it would be best to modify your post to show tests using the setup area and similarly sized arrays as you have here for full accuracy.

Thread Thread
 
svaani profile image
Vani Shivanand • Edited

May be not for now!

Though it looks like chrome is working on holey array performance, they haven't given a heads-up yet on safe usage of holey array.

You may want to go through it, It is a video done by one of v8 team member.
youtube.com/watch?time_continue=44...

Thread Thread
 
dry profile image
Hayden Mankin

I think there may have been a misunderstanding, I don't see why you wouldn't modify your post.

I haven't once argued that holey arrays are good or that there are no drawbacks (I even said in my original reply: "While the statements you are making are true, your example is still not entirely representative of this fact"). This whole time I've just been trying to point out the problems with the testing method. All I'm suggesting is utilizing the startup section of jsperf for a more honest test, like shown in jsperf.com/test-assign-vs-push/23

Currently your post is using a test where the main performance difference is the initialization of a large array and then joining said 2000 element array. compared to initializing an empty array and joining 20 elements.

Your most recent example is a much better showcase of the drawbacks of holey arrays.

 
miketalbot profile image
Mike Talbot ⭐

Reversing the order of the tests reveals the opposite answer - I fear this is a jsPerf limitation. But again you have now made a weird array by adding values and not pushing for packed - so perhaps it's also a browser implementation of that which is giving you amazingly dramatically different results. Without the actual perf I can't see but 94% slower seems just very odd and certainly not inline with the one I link below in either case.

Screenshot

jsperf.com/testh-v-p

Thread Thread
 
svaani profile image
Vani Shivanand • Edited

I already mentioned about chrome vs firefox. Please go through the entire thread before commenting.

Also, don't forget to watch the video that is posted at the end of article. It is by v8 team member. That should answer most of your questions if you won't trust on random tests.

I won't be able to respond on this post further if the video provided at the end of post is not watched. Thanks!