Arrays in javascript

Suggested Videos
Part 16 - Loops in JavaScript
Part 17 - do while loop in JavaScript
Part 18 - For loop in JavaScript



Arrays are collections and are ZERO indexed. This means the first element is at index ZERO and the last element is at index arrayObject.length - 1. length property of the array object returns the size of the array.



The following JavaScript code creates an empty array. length property returns 0 in this case.

var emptyArray = [];
alert(emptyArray.length);

Output : 0


Another way to create an array is by using the Array constructor as shown below. In this example we are setting the length of the array to 10.

var myArray = new Array(10);
alert(myArray.length);

Output : 10


Retrieving first and last elements from the array using the array index

var myArray = [10, 20, 30];

document.write("First element = " + myArray[0] + "<br/>");

document.write("Last element = " + myArray[myArray.length - 1] + "<br/>");

Output : 
First element = 10
Last element = 30


Populating an array in JavaScript : There are several ways to populate an array in JavaScript. Let's look at those different option now.

Declaring an array first and then populating using the array index

var myArray = [];
        
myArray[0] = 10;
myArray[1] = 20;
myArray[2] = 30;
        
alert(myArray);

Output : 10, 20, 30


Declaring and populating the array at the same time

var myArray = [10, 20, 30];        
alert(myArray);

Output : 10, 20, 30


Declaring an array first using the Array constructor and then populating using the array index. Though the initial size is set to 3, adding a fourth element to the array will not throw an exception, because arrays in JavaScript can grow in size.

var myArray = new Array(3);
        
myArray[0] = 10;
myArray[1] = 20;
myArray[2] = 30;      

alert(myArray);

Output : 10, 20, 30


Declaring and populating the array at the same time using the Array constructor

var myArray = new Array(10, 20, 30);
alert(myArray);

Output : 10, 20, 30

Please note : If only one number is passed to the Array constructor, then that number is used to set the size of the array. If more that one number is passed then those will be used as elements to populate the array.


A for loop can be used to populate and retrieve elements from the array object in JavaScript

Populating an array using for loop : The following JavaScript code stores even numbers in the array from 0 to 10. Notice that we are using a for loop to populate the array.

var evenNumbersArray = [];

       

for (var i = 0; i <= 5; i++)

{

    evenNumbersArray[i] = i * 2;

}

alert(evenNumbersArray);

Output : 0,2,4,6,8,10


Retrieving elements from the array using for loop : 

var evenNumbersArray = [];

       

for (var i = 0; i <= 5; i++)

{

    evenNumbersArray[i] = i * 2;

}

for (var i = 0; i < evenNumbersArray.length; i++)

{

    document.write(evenNumbersArray[i] + "<br/>");

}

Output :
0
2
4
6
8
10