The literal way
The actual data, or much better to say - the elements, of the array goes within the brackets, and is separated using
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
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
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
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.
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);
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
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
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 = 10;
, once you are done with Array Properties and Methods.
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.