The Problems with new Array in Javascript


Javascript is very powerful when it comes to memory allocation and manipulating data dynamically. But when it comes to arrays you need to be careful in order to not abuse that power and allocate much more memory than needed.

Ok. Let’s start with a small and easy to understand code sample.

It is easy to understand what the code above does right? Creates an array of 5 elements, thus the length is 5.

What about the following though?

Can you guess what they return?

Well a[0] will obviously return undefined, given that we set no values in the array. But if the array has no values what will length return?
Well it will return the amount of memory we allocated using new Array method.

This array constructor has more than one overloads. The overload in which you have only a single argument, and that argument is an integer, it basically is used as an array size definition.
The constructor of Array took a page from other programming languages that do not use dynamic data manipulation and behave in a more strict way.
For example:

Theoretically, symantics are correct with this constructor overload. You are telling the constructor what size the array you want it to be, just like any other language.
The difference though is that in Javascript, you never cared about what size the array is, at any point in time you can push or pop items from it regardless of its initial size.

For example the following code.

All is fine, you can start with an empty array, not care about any type of memory and just push and pop items in your array. To be more precise with our definitions, arrays in Javascript are more like ArrayLists.

So what is the problem with new Array(10)? Well the problem comes down to our personal usage. What if I just want to create an array with a single element inside? What if I do the following?

Well the code above will create an array of 10 items, all of them undefined, and then push an 11th item in it, number 30. So in the end we will end up with an array of 11 items, which is not what we really need. We could either needed 10 items with 30 as the last item, or 2 items, 10 and 30.
We could have needed 2 different items, but we ended up with a 3rd one. So the call to new Array(10) is in fact very ambiguous and usage of it is not really clear.

On the other hand, we could have used the following code, which has clearer intent and results.

Here our intents are more clear to the reader/reviewer of our code, plus it actually does what we want it to do.

Leave a Reply