The literal way

The simplest way to create arrays in JavaScript is using the array literals - a pair of square brackets [].

The actual data, or much better to say - the elements, of the array goes within the brackets, and is separated using , commas.

An example is shown below:

var arr = [50, 100, 60];

Let's split up this code into various fragments and understand each fragment thoroughly.

Elements and Indexes

Each individual piece of data that is stored inside an array is called an element of the array.

Array elements can be of any data type - they can be numbers, strings, Booleans, objects - even arrays, in which case a special name is given to the array as we will see in the next chapter.

The positions at which elements recide in an array are called indexes.

Indexes start at 0 and increase by 1. Therefore the first element in an array is at index 0, the second is index 1. We use these indexes to refer to elements in an array.

Spacing from commas

The spacing before and after a comma is entirely upto the programmer. There can be as many spaces and as many lines after or before commas as you like. The following are all correct.

var arr = [50,100,60]; // no spaces

arr = [50,  100,  60]; // double spaces after commas

arr = [50 , 100,      60]; // spaces before and after commas

arr = [50,
60]; // multi-lines after commas

arr = [
]; // multi-lines before and after commas
Though you can manipulate the spacing between elements and commas data as you wish, you should always follow a convention. For instance when there are long lines of strings as the data you can use multilines. Code readability shall be the factor governing the spacing!

Returning array elements

Once you have stored data in an array, it is not surprising to read it back in expressions or other areas of code. Retrieving the elements of an array is much similar to setting them - just omit the right-hand side assignment.

Technically speaking, to return/output array elements simply write the name of the array followed by a pair of square brackets, and within it the index of the element you wish to return.

For example to get the first element of arr, we will have to write the statement arr[0].

Recall that the first element in an array is at index 0!

In the code below we add two numbers held in an array and finally output the result to the console:

var nums = [10, 30];
var sum = nums[0] + nums[1];
console.log(sum); // 40

nums[0] returns the element at index 0, which is the number 10, whereas num[1] returns the element at index 1, which is the number 30. Adding both these gives 40 which is saved in sum and finally logged to the console.

The constructor way

Apart from using literals, arrays can also be created using the Array() constructor.

Simply call the constructor using the new keyword, and ultimately create a new array. The way to add data in this case, is the same as in an array literal.

// an array created using the array constructor
var arr = new Array(50, 100, 60);

Since there isn't anything special about using an array constructor to create an array it is recommended to use the literal form when creating arrays.

Although, the constructor's syntax is much in resemblance with the array literal syntax there is one important distinction in using the former.

When only one element is set on an array using the Array() constructor, and if that element is a number, then instead of adding the value to the array, the constructor creates an empty array with the given number of elements.

For example, calling new Array(5) won't create an array with an element 5, but rather create an empty array with five elements.

The following code intialises the variable marks with an empty array of six elements:

var marks = new Array(6);
Since, if the first argument to Array() is a number it will be set as the length of the array, writing a floating-point number in this position will raise an error. Following is an illustration:
var arr = new Array(1.5); // throws an error

Now you may not see this idea quite often out there, even for cases where the exact length of an array is known before creation; but nonetheless knowing something doesn't hurt, right?

Initialising an array

It is not always a necessity to populate (fill) an array immediately after creating it. One can first initialise an array and then fill it afterwards.

This is particularly useful when we want to add data to an array variable later in a script, but make sure that it operates like an array once we do that.

To initialise an array you can use either of the following.

var arr = [] // initialisation using array literal
var arr = new Array() // initialisation using array constructor
Both of these arrays are termed as empty arrays.

With this the interpreter knows that the variable arr is an array, and so we can easily add elements to it.

To give you an idea of what this really means consider the code below. First we declare a variable arr and then move on to add elements to it, thinking that it will be treated as an array:

var arr;
// some code
arr[0] = 10; // throws an error

As you can see here, line 3 throws an error because the JavaScript interpreter doesn't recognise arr as an array and likewise isn't able to add an element to it.

To solve this problem we only need to initialise the array using the ways discussed above:

var arr = []; // array initialised
// some code
arr[0] = 10;
You will better understand the advantage of pre-initialising an array variable with [], once you are done with Array Properties and Methods.

In conclusion

This chapter focused on the creation of arrays, but with it also introduced you to some key ideas that include adding elements to arrays, initialising arrays and so on.

To accelerate your understanding of this chapter take the Array Starting Quiz and see where you stand right now! The next chapters dive deeper into arrays so it will be good to first get this chunk of information dealt with before moving on.