Javascript Array

• « Previous
• Next »

Javascript arrays are ordered lists of data and can hold any type of data in each slot.

Arrays in Javascript are dynamically sized, automatically growing.

Arrays can be created in two ways.

• Array constructor
• Array literal notation

Array constructor

The following code uses the Array constructor.

You can pass the count into the constructor, and the length property will set to that value.

You can pass items to Array constructor.

It's OK to omit the new operator when using the Array constructor.

var colors = Array(3);      //create an array with three items
var names = Array("red");   //create an array with one item, the string "red"

Array literal

An array literal includes square brackets and a comma-separated list of items.

var colors = ["red", "blue", "green"]; //creates an array with three strings
var names = [];                        //creates an empty array

Loop

You can enumerate the content of an array using a for loop.

var myArray = [ 100, "A", true ];
for ( var i = 0; i < myArray.length; i++) {
  console.log("Index " + i + ": " + myArray[i]);
}

The code above generates the following result.

Array index

To get and set array values, use square brackets and the zero-based numeric index.

var colors = ["red", "blue", "green"];      
console.log(colors[0]);                     
colors[2] = "new black";                        //change the third item
colors[3] = "new brown";                        //add a fourth item
console.log(colors.toString());//  w w  w .j  a v a2 s.  c  o  m


var myArray = new Array();
myArray[0] = 100;
myArray[1] = "Adam";
myArray[2] = true;
console.log(myArray.toString());

The code above generates the following result.

If the index is less than the number of items in the array, then it will return the value in the getter and replace the value in the setter.

If a value is set to an index that is beyond the end of the array, the array is expanded.

Array length

The number of items in an array is stored in the length property.

var colors = ["red", "blue", "green"];    //creates an array with three strings
var names = [];                           //creates an empty array
console.log(colors.length);    //3
console.log(names.length);     //0

var names = new Array(); 
console.log(names.length);//0

The code above generates the following result.

Array length in Javascript is not read-only.

By setting the length property, you can easily remove items from or add items to the end of the array.

var colors = ["red", "blue", "green"];    //creates an array with three strings
colors.length = 2;
console.log(colors[2]);        //undefined
console.log(colors.toString());        

colors = ["red", "blue", "green"];    //creates an array with three strings
colors.length = 4;
console.log(colors[3]);        //undefined
console.log(colors.toString());  

The code above generates the following result.

Array length Example 2

We can use length property to add items the end of an array.

The last item in an array is at position length - 1, so the next available open slot is at position length.

var colors = ["red", "blue", "green"];    //creates an array with three strings
colors[colors.length] = "black";          //add a color (position 3)
console.log(colors.toString());  
colors[colors.length] = "brown";          //add another color (position 4)
console.log(colors.toString());  

The code above generates the following result.

Array length Example 3

var colors = ["red", "blue", "green"];    //creates an array with three strings
colors[99] = "black";                     //add a color (position 99)
console.log(colors.length);  //100

The code above generates the following result.

Array detecting

We have two ways to check if a variable is an array. The first method is to use instanceof operator.

if (value instanceof Array){ 
  //do something on the array 
}

The second one is to use Array.isArray() method.

if (Array.isArray(value)){ 
//do something on the array 
}

Array detecting Example

var colors = ["A", "B", "C"]; 
//creates an array with three strings 

if (Array.isArray(colors)){ 
   console.log("colors is an array");
} 

The code above generates the following result.

• Next »
• « Previous