Why is .join () not working with function arguments?

Question

Why is this work (returns "one, two, three"):

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

and this work (returns "list: 111"):

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

but not this (returns empty):

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

What do I need to do with my "arguments" variable to use .join () on it?

Answer 1

This does not work because the arguments object is not an array, although it looks like it. It does not have a 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 makeArray , which will try to turn "almost arrays", for example, arguments into arrays:

 var args = $.makeArray(arguments); 

Here's what to say about it: a link to Mozilla (my favorite resource for this kind of thing):

The arguments object is not an array. It looks like an array, but does not have array properties other than length . For example, it does not have a pop method ....

The arguments object is only available inside the function body. Trying to access the object of arguments outside the function declaration results in an error.

Answer 2

If you are not interested in other Array.prototype methods, and you just want to use join , you can call it directly without converting it to an array:

 var displayIt = function() { return 'the list: ' + Array.prototype.join.call(arguments, ','); }; 

You may also find it useful to know that the comma is the default separator; if you do not specify a separator, the spec comma will be used.

Answer 3

Just use jQuery makeArray utility

arguments not an array, it is an object. But, since it is so “array-like”, you can call the jQuery makeArray utility function to make it work:

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

It will display:

 <p>the list: 111,222,333</p> 

Answer 4

You can use this jQuery.joinObj Extension / Plugin which I made.

As you will see in this fiddle, you can use it as follows:

 $.joinObj(args, ","); 

or

 $.(args).joinObj(","); 

---

Plugin code:

 (function(c){c.joinObj||(c.extend({joinObj:function(a,d){var b="";if("string"===typeof d)for(x in a)switch(typeof a[x]){case "function":break;case "object":var e=c.joinObj(a[x],d);e!=__proto__&&(b+=""!=b?d+e:e);break;default:"selector"!=x&&"context"!=x&&"length"!=x&&"jquery"!=x&&(b+=""!=b?d+a[x]:a[x])}return b}}),c.fn.extend({joinObj:function(a){return"object"===typeof this&&"string"===typeof a?c.joinObj(this,a):c(this)}}))})(jQuery); 

Answer 5

You can use typeof to see what happens here:

 >>> typeof(['one', 'two', 'three']) "object" >>> typeof(['one', 'two', 'three'].join) "function" >>> typeof(arguments) "object" >>> typeof(arguments.join) "undefined" 

Here you can see that typeof returns an “object” in both cases, but only one of the objects has a specific join function.

Answer 6

arguments is not a jQuery object, but a regular JavaScript object. Run it before trying to call .join() . I think you will write:

 return 'the list:' + $(arguments)[0]; 

(I am not very familiar with jQuery, only Prototype, so I hope this is not completely fictitious.)

Edit: This is wrong! But in his answer, Doug Neiner describes what I'm trying to accomplish.

Answer 7

I don't know if there is an easy way to convert arguments to an array, but you can try the following:

 var toreturn = "the list:"; for(i = 0; i < arguments.length; i++) { if(i != 0) { toreturn += ", "; } toreturn += arguments[i]; } 

Answer 8

You cannot currently join array arguments because they are not an array, shown here

so you need to either first turn them into an array like this,

 function f() { var args = Array.prototype.slice.call(arguments, f.length); return 'the list: ' + args.join(','); } 

or like that, a little shorter

 function displayIt() { return 'the list: ' + [].join.call(arguments, ','); } 

if you use something like babel or a compatible browser to use es6 functions, you can also do this with rest arguments.

 function displayIt(...args) { return 'the list: ' + args.join(','); } displayIt('111', '222', '333'); 

which allows you to do even cooler things like

 function displayIt(start, glue, ...args) { return start + args.join(glue); } displayIt('the start: ', '111', '222', '333', ',');