How to Declare an Empty Array in JavaScript

Suppose that, for one reason or another, you need to declare an empty array in JavaScript. (A good example of this is generating an array of letters in the English alphabet, which I recently wrote about.)

What’s the best way to do that?

There are two ways to declare an empty array object in JavaScript. One is to create a literal with brackets, and the other is to instantiate an array with the new array()constructor method.

This is how to create a literal with brackets:

let myArray = [];

And this is how to construct an array with the new Array() constructor method:

let myArray = new Array();

Which one should you use?

According to W3Schools, the brackets and new Array() constructor method do exactly the same. For code that’s easier for humans to read and faster for machines to interpret, use the shorter, array literal method over the longer, array constructor method.

You can then save the elements in your array object as necessary:

myArray[0] = "Apple";
myArray[1] = "Facebook";
myArray[2] = "Google";
myArray[3] = "Microsoft";

Or mutate and reassign the array object as needed (more on that, and the implementation choices you need to make to enable these two operations, below).

Declare Empty Array Only If It Doesn’t Exist

What if there’s a possibility that your array has already been declared? If you redeclare it as an empty array, you will delete all the data elements already in it—which may adversely affect your website or web application.

To only declare an empty array if that array object doesn’t already exist, use the following approach:

window.myArray = window.myArray || [];

Const, Let, or Var?

Arrays in JavaScript are objects that you can use to store multiple items under a single name. And objects, as any experienced programmer knows, can be mutated, meaning that their values can be reassigned to new arrays.

// You can mutate
const arrayOne = [1, 2, 3];
const arrayTwo = [4, 5, 6];
const finalNumbers = arrayOne + "," + arrayTwo;
console.log(finalNumbers);
// Outputs 1,2,3,4,5,6

// But you can't reassign
const currentNumbers = [1, 2, 3, 4, 5];
const currentNumbers = [6, 7, 8, 9, 10];
console.log(currentNumbers);
// Outputs 1,2,3,4,5

As a matter of fact, many of JavaScript’s built-in methods for array objects enable you to mutate those objects economically, with vanilla code. However, not all arrays can be reassigned.

// You can mutate
let arrayOne = [1, 2, 3];
let arrayTwo = [4, 5, 6];
let finalNumbers = arrayOne + "," + arrayTwo;
console.log(finalNumbers);
// Outputs 1,2,3,4,5,6

// And you can reassign
let currentNumbers = [1, 2, 3, 4, 5];
let currentNumbers = [6, 7, 8, 9, 10];
console.log(currentNumbers);
// Outputs 6,7,8,9,10

Whether to declare your array as a constant or variable comes down to what you can—and cannot—do with it as a result:

• If you declare your array as a const, you can mutate the array object but you can’t reassign it;
• If you declare your array as a let or var, you can mutate the array object and reassign it. The choice between let and var is as follows:
  • Declaring the array as var scopes it globally or to the function body;
  • Declaring the array as let scopes it to the statement between curly brackets ({}).

This has significant implications for your code and logic. For example, if you need to empty an array every now and then, declaring it as a constant will not work for you; declaring it as a variable is the way to go.

To put these trade-offs in a table:

Feel free to bookmark this post and reference it as needed.

In Conclusion

It’s easy to declare an empty array in JavaScript. What’s hard is choosing exactly how to do it, so that you can manipulate the array object as you need in your app.

With the knowledge bomb I dropped on you all above, I hope that choice is less hard to make. Thanks for reading this far, and be sure to add anything I may have missed or that’s worth including in the comments below.