DEV Community

Discussion on: Populating a pre-allocated array slower than a pushing to a regular array?

Collapse
 
mse99 profile image
Mohamed Edrah • Edited

The JavaScript engine (as an optimization) uses actual typed arrays behind the scenes, this will not be the case if you use arrays with holes (empty slots i.e the length element is disproportional to the amount of properties (elements) in the array).

JavaScript arrays are objects (technically they're defined as an 'exotic' object in the standard), whenever you try to set (via the assignment operator) or get a property from an object the JS engine has to perform a lookup algorithm which is slow, which is why JavaScript engines use typed arrays and other tricks to speed up getting and setting array elements.

the reason is the pre-allocated array is much slower because it's holey which means that the properties (elements) you're trying to set (or get) don't actually exist on the array, but there's a chance that they might exist on the prototype chain so the runtime will preform a lookup operation which is slow compared to just getting the element from memory and returning it.

also the runtime will probably consult the prototype chain when you try to access an index that doesn't exist on the array (even if the array doesn't have empty slots), lets say you have an array with 3 elements in it.

const arr = [1,2,3];
Enter fullscreen mode Exit fullscreen mode

if you try to set the fourth element using the index it will be much slower than just using the .push function

arr[arr.length] = 4; // would probably be slower
arr.push( 4 ); // should in theory be faster  
Enter fullscreen mode Exit fullscreen mode

the reason behind pushing new items using the length being slower, is the fact that the runtime must perform a [[set]] operation on the object and climb the entire prototype chain of the array, avoid accessing indices that don't exist on the array always do a bounds check before you try to get or set an element in the array, always use .push to append new elements to the array.

avoid using the Array(...) constructor it's terribly uncommon and gets lots of flak from the community for being bug prone because if you pass in only one number argument it will return a holey array, also avoid pushing null or undefined as items as they (in some cases degrade performance).

also if you can you should try to keep the type of values in your arrays the same, if you have an array of numbers don't push a string to it unless you really have to.

Collapse
 
henryjw profile image
Henry Williams

The JavaScript engine (as an optimization) uses actual typed arrays behind the scenes, this will not be the case if you use arrays with holes (empty slots i.e the length element is disproportional to the amount of properties (elements) in the array).

If I understand this correctly, does this mean that new Array(1000) doesn't actually allocate a typed array under the hood?

Collapse
 
mse99 profile image
Mohamed Edrah

It probably does allocate some sort of array or object behind the scene, It won't be as performant because the runtime will have to do extra work in order to get or set elements, but to answer your question, no allocation does happen one way or another the runtime will create a data structure to represent your program's data.