There are several ways to declare an array in JavaScript. This article will show you which is the best.
What is an Array?
An array is a type of variable that holds an ordered list of values. Each value has a position in the array, called the index. The index can be used to access each value in the array. Indexes are integer values, which start counting from 0 (zero) for the first item in the array.
The Literal Constructor – Declaring an Array using Square Brackets (The Best Way)
The square-bracket {[]) syntax for declaring arrays is both the simplest and most unambiguous way of declaring arrays. Moreover, it’s the best method because it’s clear to both the coder and the computer what is going on.
Declaring an array with this method is as simple as wrapping a list of comma-separated values with square brackets. This is referred to as the literal constructor.
Below, an array containing the separate numerical values 1, 2, and 3 is declared:
var myArray = [1, 2, 3];
As you can see, it’s just the values that are to be placed in the new array, comma-separated, surrounded by square brackets.
Any type or class of value or variable can be placed in an array when it is created:
var myArray = [3, 'dog', true, new Date()]; // Creating an array containing an integer, string, boolean, and date value
A new Date() constructor which returns a new Date object is also included in the above array. If a constructor or function is used when declaring an array, the return value of that function will be added to the array.
You can also declare an empty array by including no values:
var myEmptyArray = [];
Declaring an Array using The Array() Constructor (Not the Best Way)
You will often see arrays declared using the Array() constructor. I find there to be some ambiguity when using this, so I tend to avoid it.
For example, the below line of JavaScript creates an array with three undefined elements – Not an array with an item with the numerical value 3):
var myArray = new Array(3);
However, this line of code creates a new array that contains the two numerical values 3 and 4:
var myArray - new Array(3, 4);
Why is this?
The Array() constructor syntax accounts for two scenarios:
- The first, a number is passed to the constructor, and the constructor creates a new array with that number of elements, each of them undefined.
- The second, a comma-separated list of items is passed to the constructor, and the constructor creates a new array with the elements in that list.
This leaves the door open for accidental misuse. For example, you might be creating arrays with numbers in them, and one of those arrays may happen to only have one value. Using the Array() constructor, in this case, would create an array that doesn’t contain that number but contains a bunch of undefined elements.
It also makes it more difficult for someone else (or you, in the future) to read your code – Were you trying to declare an array with five undefined elements or declare an array containing an item with the value 5?.
Overall, it’s best avoided. Instead, please keep it simple and use square brackets.
Other Things to Do With JavaScript Arrays
We’ve got a bunch of other articles about JavaScript arrays – check them out here!
