Creating JavaScript Arrays Using Literals and Constructors

Or, how to create an array that does what you expect

A JavaScript array is an incredibly smart object that at its core is a fancy list. Really: you put things in order, they’re stored in order, they’re given back to you in order. They’re magical and, if you’re not creating them properly, incredibly frustrating.

There are two main ways to create arrays in JavaScript: you can use a literal, or you can use a constructor.

The literal looks like this:

const myAmazingArray = [];

and can be defined with or without any array elements. The one above doesn’t have any elements yet.

The constructor looks like this:

const myAmazingArray = new Array();

and uses the new keyword on the Array object.

Why would you pick one over the other?

I’ll focus on the advantages of the array literal. It’s my preferred way of creating arrays, and most JavaScript developers will choose the literal over the constructor (if you keep reading you’ll see why). It’s a newer way of defining an array, and it involves assigning a variable to a set of square brackets (the array), which may or may not be empty. Regardless, you can add or remove elements any time you please!

What’s so great about an array literal?

• You don’t have to know how many items your array will hold.

I could be dramatic and say that there’s no limit to the number of elements that an array can hold, but that’s not exactly true — you max out around 2^32 elements, which is the range of a 32-bit register. For most people, this is more than enough bits to accomplish what they need, but the important thing is that you can start with an empty array and go up to 4,294,967,295 elements without having any sort of plan when you start.

• An array literal can’t be overridden.

When you define a literal using a const variable, it’s yours. You can update the elements inside the array (because an array is mutable), but that array assigned to that variable is going to continue to exist in exactly the way that you expect.

An array defined with the constructor, on the other hand, isn’t as safe. I know you’re careful and responsible with your code, but Third Party Libraries! They’re reckless! They throw caution to the wind! They can override your Array object.

• An array literal is easy for humans to read.

If you came across this:

const avocado = [8];

you would expect an array with one element: the number 8. (You’d be correct.)

What about this?

const potato = new Array(8);

This gives you an array with 8 elements, all of which are undefined. (If you were to console.log(potato[0]) your response would be undefined.)

Okay…what about this?

const apple = new Array(5, 8);

This gives you an array with two elements: the number 5, and the number 8.

What’s going on? It turns out that (via MDN):

A JavaScript array is initialized with the given elements, except in the case where a single argument is passed to the Array constructor and that argument is a number (see the arrayLength parameter below). Note that this special case only applies to JavaScript arrays created with the Array constructor, not array literals created with the bracket syntax.

It’s not like it’s impossible to remember this, but I’m a fan of consistency, and the array literal does a far better job at that than the constructor does.

(As an aside: some other languages, like Java and C, use dynamic memory allocation and need to reserve memory for an array in advance, which is where this logic comes from — but JavaScript is pretty liberal and can just go with the flow of your array whims.)

Fundamentally? The array constructor is less flexible, less clear, and less fun (that’s subjective but honestly, try it); the array literal is adaptable, consistent, and quicker to parse.