Arrays supply a programmer with a way of compartmentalizing data that is all to be processed in a similar way. The Javascript Array data object gives the script author access to all of the array properties and methods when they work with arrays of information.
Array Object Syntax
Javascript CODE EXAMPLE
var array1 = ["John","Susan","Paul","Alice"];
var array2 = Array("John","Susan","Paul","Alice");
var array3 = new Array("John","Susan","Paul","Alice");
All of the approaches shown above will establish the same array in Javascript.
Array Types
Basic Array
Basic arrays represent one or more values separated by commas. The values can be a mixture of strings, numbers and variables. Each array item gets an index number associated with it which is its key. There are multiple ways to parse and access the elements of an array.
Build a basic array and access its items directly by their index number:
Javascript CODE EXAMPLE
var flavorArray = ["Vanilla","Chocolate","Strawberry","Orange"];
document.write(flavorArray[0]+" is very yummy.<br />");
document.write(flavorArray[1]+" is very yummy.<br />");
document.write(flavorArray[2]+" is very yummy.<br />");
document.write(flavorArray[3]+" is very yummy.");
Populate arrays by placing values directly into index positions of the array:
Javascript CODE EXAMPLE
var dogs = [];
dogs[0] = "Pitbull";
dogs[1] = "German Shepherd";
dogs[2] = "Greyhound";
document.write(dogs); // Pitbull,German Shepherd,Greyhound
Access array items dynamically using a for...in loop:
Javascript CODE EXAMPLE
var flavorArray = ["Vanilla","Chocolate","Strawberry","Orange"];
for (var flavor in flavorArray) {
document.write(flavorArray[flavor]+" is very yummy.<br />");
}
Associative Array
Associative arrays give you a way to label your array item keys instead of them being numbered in the way that array elements are usually numerically indexed by default. The key is directly associated to its value in a meaningful way.
Javascript CODE EXAMPLE
var myArray = {user:"Joe", age:24, height:"70in"};
document.write(myArray["user"]+" is "+myArray["age"]+" years old.<br />");
document.write(myArray["user"]+" is "+myArray["height"]+" tall.");
Multideminsional Array
A multidimensional array is an array that is holding multiple arrays that can be of various types.
Javascript CODE EXAMPLE
var myArray = new Array(
["Vanilla","Chocolate","Strawberry"],
["Cat","Dog","Fox","Mouse","Owl"],
["HTML","CSS","Javascript","PHP"]
);
document.write(myArray[0]+"<br />");
document.write(myArray[1]+"<br />");
document.write(myArray[2]+"<br />");
Parse a multidimensional array dynamically using a for...in loop inside of a for loop:
Javascript CODE EXAMPLE
var myArray = new Array(
["Vanilla","Chocolate","Strawberry"],
["Cat","Dog","Fox","Mouse","Owl"],
["HTML","CSS","Javascript","PHP"]
);
for(var i = 0; i < myArray.length; i++) {
document.write("<h3>Array | "+myArray[i].length+" items</h3>");
for(var itm in myArray[i]) {
document.write(myArray[i][itm]+"<br />");
}
}
Methods of the Array Object
• concat - returns a new array that is a concatenation of two or more arrays
Javascript CODE EXAMPLE
var fruits = ["Apple","Orange","Banana"];
var veggies = ["Celery","Onion"];
var dairy = ["Eggs","Cheese","Milk"];
var allFoods = fruits.concat(veggies,dairy);
document.write(allFoods);
// Apple,Orange,Banana,Celery,Onion,Eggs,Cheese,Milk
• join - joins all array elements into a string, by a delimiter you specify
Javascript CODE EXAMPLE
var carMakers = ["Ford","Chevy","Dodge"];
var str = carMakers.join(" .:|:. ");
document.write(str); // Ford .:|:. Chevy .:|:. Dodge
• push - add one or more elements onto the end of an array
Javascript CODE EXAMPLE
var gods = ["Jehovah","Allah"];
gods.push("Shiva","Buddha");
document.write(gods); // Jehovah,Allah,Shiva,Buddha
• pop - takes the last element off the end of an array
Javascript CODE EXAMPLE
var monsters = ["Wolfman","Dracula","Frankenstein"];
lastMonster = monsters.pop();
document.write(lastMonster); // Frankenstein
document.write("<hr />");
document.write(monsters); // Wolfman,Dracula
• shift - takes the first element off the beginning of an array
Javascript CODE EXAMPLE
var monsters = ["Wolfman","Dracula","Frankenstein"];
firstMonster = monsters.shift();
document.write(firstMonster); // Wolfman
document.write("<hr />");
document.write(monsters); // Dracula,Frankenstein
• unshift - adds one or more elements to the beginning of an array
Javascript CODE EXAMPLE
var trees = ["Maple","Oak","Pine"];
trees.unshift("Holly","Spruce");
document.write(trees); // Holly,Spruce,Maple,Oak,Pine
• slice - returns a portion of an array by specifying the starting index, and the range
Javascript CODE EXAMPLE
var people = ["Frank","Alice","John","Kim","Peter","Susan"];
var portion = people.slice(0,3); // starting from index 0, slice 3 elements
document.write(portion); // Frank,Alice,John
• splice - remove array elements and optionally replace them
Javascript CODE EXAMPLE
var instruments = ["piano","guitar","harp","flute","cello"];
instruments.splice(0,2); // starting from index 0, remove 2 elements
document.write(instruments); // harp,flute,cello
Javascript CODE EXAMPLE
var instruments = ["piano","guitar","harp","flute","cello"];
instruments.splice(0,2,"organ","saxaphone"); // replace the first 2 elements
document.write(instruments); // organ,saxaphone,harp,flute,cello
• reverse - reverse(transpose) an array
Javascript CODE EXAMPLE
var letters = ["a","b","c"];
letters.reverse();
document.write(letters); // c,b,a
• sort - performs a natural sort on array elements
Javascript CODE EXAMPLE
var people = ["John","Robert","Alex"];
people.sort();
document.write(people); // Alex,John,Robert
Javascript CODE EXAMPLE
var myArray = [3,4,1,2];
myArray.sort();
document.write(myArray); // 1,2,3,4
Properties of the Array Object
• length - returns the array length according to its internal pointer(not precise as a count in some instances). It can also remove array elements to a specified length. It is safe to use this property as a means of counting how many items are in an array, if you are sure the array will not have undefined or padded elements inside of it.
Javascript CODE EXAMPLE
var fruits = ["Apple","Orange"];
fruits[10] = "Banana";
document.write(fruits.length); // 11 (even though the array has only 3 items in it)
document.write("<hr />");
fruits.length = 0;
document.write(fruits.length); // 0 (shows empty array)
