The literal way
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, 100, 60]; // multi-lines after commas arr = [ 50, 100, 60 ]; // multi-lines before and after commas
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.
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 + nums; console.log(sum); // 40
nums returns the element at index 0, which is the number 10, whereas num 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.
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);
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
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 = 10; // throws an error
To solve this problem we only need to initialise the array using the ways discussed above:
var arr = ; // array initialised // some code arr = 10;
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.