Arrays, Arguments and Nodes

Not everything in JavaScript that appears to be an array actually is a JavaScript Array. Two JavaScript objects that look somewhat like an array but which are not arrays are arguments and node lists.

The arguments object is available within any function or method. The main thing that it contains is a numbered list containing all of the parameters passed to that function or method (which can include more values than just those named in the function declaration. This list and the way that you reference it gives the arguments object the appearance of being an array, particularly as there is also a length property to identify the number of entries in the list.

Let's take a look at some JavaScript that both demonstrates how the arguments list looks a little like an array which also demonstrates how the arguments object works.

x = function(a, b, c) {
for(i = 0; i < arguments.length; i++) alert(arguments[i]);

This quick JavaScript (which uses several things you wouldn't use in JavaScript intended for a web page but which are okay to use for a simple test like this) runs the x() function passing five parameters each of which contains a different number so we can easily tell which parameter is which. Despite the fact that the x() function only provides names to reference the first three, our loop is still able to display five alerts demonstrating that the function can access all the parameters passed using the arguments list even if we don't give them names. Of course the debugging alert call is just there so we can see what arguments[i] refers to.

So how does this differ from an Array? Well apart from the now deprecated arguments.callee property (which is no longer available in strict JavaScript) the numbered properties and the length property make up the entire content of the arguments object. None of the methods that are available for manipulating arrays are available to use with an argument list.

We can of course easily copy arguments into a real Array by adding one line of extra code at the start of our function and then referencing that Array to do all our arguments processing with all the Array methods now being available to use. For example we can display all the arguments in one alert with the values separated by colons using:

x = function(a, b, c) {
var args =;
// args is now a real Array version of arguments

When you use one of the Document Object Model calls that can potentially reference more than one element in the HTML of a web page the result that is returned is a live node list (if you use one of the getElementsBy... calls) or a static list of the nodes at the time of the call (if you use querySelector or querySelectorAll).

Let's look at some code referencing a node list in a way similar to the above arguments code. The following builds a node list of all the images in the web page and then alerts their alt text.

y = document.getElementsByTagName('img');
for(i = 0; i < y.length; i++) alert(y[i].alt);

As with the arguments, our node list provides a numbered list referencing all the elements that meet the specified criteria and a length property that identifies the number of nodes in the list. There are no other properties for a node list and no methods at all.

To convert a node list into an array we can use a statement similar to that which we used to convert arguments to an array (note that this doesn't work in Internet 8 and earlier - where we'd need to set up a loop to copy the nodes one at a time instead). The biggest difference though is where the node list is a live copy of whatever elements are currently in the page where the array would not be automatically updated when the node list changes due to the insert or removal of elements.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow