Every JavaScript object, except the global "Object" object, is linked to a prototype object and the (derived) object automatically inherits all properties of its prototype. Arrays being objects, also come with a prototype: Array.prototype. Array.prototype is a versatile prototype and provides a host of useful built-in methods for arrays like concat(), sort(), reverse(), etc.
Let us begin by listing the methods supported by an Array.prototype. To do so, we can use the getOwnPropertyNames() method of the global "Object" object.
<!doctype html>
<html>
<body>
<div id="idDiv"></div>
<script type="text/javascript">
// Get a handle of the div element.
var elem = document.getElementById("idDiv");
var props = Object.getOwnPropertyNames(Array.prototype);
var i = 0;
for (var item in props) {
if (i++ != 0) {elem.innerHTML += ", ";}
elem.innerHTML += props[item];
}
</script>
</html>
The output of this example prints all properties of Array.prototype (with Firefox 10): length, constructor, toSource, toString, toLocaleString, join, reverse, sort, push, pop, shift, unshift, splice, concat, slice, indexOf, lastIndexOf, forEach, map, reduce, reduceRight, filter, some, and every. Except for the "length" property, all of the above properties are in fact methods. Thus, if we were to sort an array (let us say, "arraySmall"), then all we have to do is call the sort() method: "arraySmall.sort()".
A powerful feature of JavaScript prototype is that if we add a method to a prototype, then it becomes available to all objects based on that prototype! What this means is that if we need to publish a new method for arrays, then we can simply add this method to the Array.prototype. The newly added method would automatically become available to all arrays objects, including those that were defined prior to adding the new method!
Let us use a simple example to add a method (we call it returnFirstElement()), to Array.prototype. This method returns the last element of an array. Before adding this method, we define a function "getLastElement()" and then assign this function to the Array.prototype's returnFirstElement method. Function getLastElement() uses the "this" keyword to identify the current object in scope; when run from the arraySmall context, "this" points to the arraySmall object. The output of this example is "Merlin".
<!doctype html>
<html>
<div id="idDiv"></div>
<script type="text/javascript">
// Get a handle of the div element.
var elem = document.getElementById("idDiv");
// Function to return the Last element. Here, "this" refers
// to the current object (in this case, array) in scope.
function getLastElement () {return this[this.length-1];}
// Define an array.
var arraySmall = ["Elves", "Goblins", "Dragons", "Merlin"];
// Assign getLastElement to Array.prototype.
Array.prototype.returnLastElement = getLastElement;
// Invoke the new method from an array.
elem.innerHTML += arraySmall.returnLastElement(); // Prints "Merlin"
</script>
</html>
Array.prototype provides a rich set of array methods, let us use the next few pages to discuss its methods in detail.