JavaScript Arrays

JavaScript Array Object

As you all know, normally a variable can hold only one piece of data at a time. But Arrays are special because it can hold more than one value at a time, and you can access these values individually.

var myVar = 10; //Variable Declaration
var myVarArray = new Array(); //Array Declaration

If you already know the number of items that would store in an array, you can pass the number to the constructor of an Array Object

var myVarArray = new Array(10);

The above array declaration creating an Array using the Constructor, that holds 10 undefined elements. Similarly, you can directly initialize the Array elements when declaring an Array Object.

var weekArray = new Array("Sunday","Monday","Tuesday");

Arrays are a group of data items that you can treat as a single unit. It is helpful when you want to store a group of values in the same variable instead of using separate variables for each value. Like other programming languages, JavaScript array indexes start from 0 (zero) and continue as 1,2,3 etc..

var weekArray = new Array();
myArray[0] = "Sunday";
myArray[1] = "Monday";
myArray[2] = "Tuesday";
myArray[3] = "Wednesday;
myArray[4] = "Thursday";
myArray[5] = "Friday";
myArray[6] = "Saturday";

Displaying Javascript Array elements

You can display Array elements in several ways. The following methods will show all elements from an Array.

alert(weekArray.toString());
alert(weekArray.valueOf());
alert(weekArray);

Accessing individual Values from Javascript Array

alert(weekArray[1]);

The above statement will display "Monday", because Javascript Array index starts from 0, so weekArray[1] is Monday. If you try to access an element that does not exist, it will return undefined instead of throwing an error.

alert(weekArray[12]);

The above statement will return undefined, because weekArray[12] does not exists.

Accessing Array elements using for loop

for (var i = 0; i < weekArray.length; i++) {
	alert(weekArray[i]); // alert each day one at a time
}

Assigning values to Javascript Array

weekArray[7] = "Newday";

The above statement add a new value to the Javascript Array.

Array element types

Normally programming languages hold one type of value in an array. That is, if you want to hold string types, numeric types etc. you have to declare different types of array for storing string and numeric values. But in Javascript you can hold any type of data in each slot. That means you can store any type of data together in a Javascript Array such as string, numeric, Boolean, object etc.

var genericArray = new Array("someString",2,true,{});

In the above declaration genericArray stores String, Numeric, Boolean and Object.

Javascript Array Length

The Length property of Javascript Array return the number of elements contains in an Array. Javascript Array index starts from 0 so the length of an array is equal to the last index + 1.

alert(weekArray.length);

The above statement will return 7, that means the weekArray contains seven elements.

If you specified the length while creating the array, this will return as length property's value.

var weekArray = new Array(7);
document.write(weekArray.length); //will return 7

Arrays Undefined Values

Arrays are automatically growing and dynamically sized to accommodate any type of data that is added to them. So, when you add or remove elements from an array, the length of the array will change as needed. When you declare an Array with constructor, each slot will be set to "undefined".

var tempArray = new Array(4);
tempArray[0] = "Halo";
tempArray[1] = "World";
tempArray[3] = "JavaScript";
alert(tempArray.length); // will alert 4
alert(tempArray[2]); // will alert "undefined"

Array.push()

The array.push() in Javascript add new elements to the end of an Array and changes the length of the array.

var colors = ["Red", "Green", "Blue"];
colors.push("Yellow")
alert(colors.toString());

The above code will return Red, Green, Blue , Yellow, that is Yellow added at the end of the Array

Array.contains()

The Array.Contains() method checking whether or not an item is contained within your array.

var weekArray = new Array("Sunday","Monday","Tuesday");
if (weekArray.contains('Sunday')) {
   // write your code here
}

Array.sort

Javascript Array.sort() method sort the elements in an Array either Alphabetic or Numeric, also you can sort ascending or descending. The default sort order is alphabetic and ascending.

Alphabetical Order

var weekArray = new Array("Sunday","Monday","Tuesday");
weekArray.sort();

The array order will be...Monday, Sunday, Tuesday.

weekArray.reverse();

The array order will be...Tuesday, Sunday, Monday

Numerical Order

var numArray = [80,30,50,40];
numArray.sort()

The array order will be..30, 40, 50, 80

numArray.reverse();

The array order will be..80, 50, 40, 30

Array.splice()

The splice() method in Javascript add new elements to the Array and removing old elements from Array.

var colors = ["Red", "Blue", "Green"];
colors.splice(2,0,"Yellow","Orange");

colors.splice(2,0,"Yellow","Orange") means that add new elements at the array index 2 and removed 0 elements.

The array order will be ...Red, Blue, Yellow, Orange, Green

Array.slice()

The slice() method in Javascript retrieve the elements starting at the first argument, and ends at second argument-1.

var colors = ["Red", "Blue", "Green", "Yellow","Orange"];
var selectedColors = colors.slice(1, 3);

The selectedColors are...Blue,Green.

colors.slice(1, 3) select 1 to 3-1 elements from colors.

Array.join()

The join() method in Javascript will be separated by a specified separator with given argument.

var colors = ["Red", "Blue", "Green"];
alert(colors.join('#'));

The result will be Red#Blue#Green

alert(colors.join(''));

The result will be RedBlueGreen