Question

Why does this work (returns “one, two, three”):

var words = ['one', 'two', 'three'];
$("#main").append('<p>' + words.join(", ") + '</p>');

and this work (returns “the list: 111”):

var displayIt = function() {
    return 'the list: ' + arguments[0];
}   
$("#main").append('<p>' + displayIt('111', '222', '333') + '</p>');

but not this (returns blank):

var displayIt = function() {
    return 'the list: ' + arguments.join(",");
}   
$("#main").append('<p>' + displayIt('111', '222', '333') + '</p>');

What do I have to do to my “arguments” variable to be to use .join() on it?

Answer 1

It doesn’t work because the arguments object is not an array, although it looks like it. It has no join method:

>>> var d = function() { return '[' + arguments.join(",") + ']'; }
>>> d("a", "b", "c")
TypeError: arguments.join is not a function

To convert arguments to an array, you can do:

var args = Array.prototype.slice.call(arguments);

Now join will work:

>>> var d = function() {
  var args = Array.prototype.slice.call(arguments);
  return '[' + args.join(",") + ']';
}
>>> d("a", "b", "c");
"[a,b,c]"

Alternatively, you can use jQuery’s makeArray, which will try to turn “almost-arrays” like arguments into arrays:

var args = $.makeArray(arguments);

Here’s what the Mozilla reference (my favorite resource for this sort of thing) has to say about it:

The arguments object is not an array.
It is similar to an array, but does
not have any array properties except
length. For example, it does not have
the pop method. …

The arguments object is available only
within a function body. Attempting to
access the arguments object outside a
function declaration results in an
error.