Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I convert the "arguments" object to an array in JavaScript?

The arguments object in JavaScript is an odd wart—it acts just like an array in most situations, but it's not actually an array object. Since it's really something else entirely, it doesn't have the useful functions from Array.prototype like forEach, sort, filter, and map.

It's trivially easy to construct a new array from an arguments object with a simple for loop. For example, this function sorts its arguments:

function sortArgs() {     var args = [];     for (var i = 0; i < arguments.length; i++)         args[i] = arguments[i];     return args.sort(); } 

However, this is a rather pitiful thing to have to do simply to get access to the extremely useful JavaScript array functions. Is there a built-in way to do it using the standard library?

like image 644
Andrew Coleson Avatar asked Jun 07 '09 00:06

Andrew Coleson


People also ask

How do you convert an argument to an array?

Another way of converting the arguments object into an array is to use the method Array. from() . Here, we have to pass the arguments object inside the from() method, giving us an array. You can either store the resulting array into a variable or even directly access the elements inside this array.

Can we convert object to array in JavaScript?

JavaScript Objects Convert object's values to array You can convert its values to an array by doing: var array = Object. keys(obj) . map(function(key) { return obj[key]; }); console.

Is arguments object an array?

The arguments object is a local variable available within all non-arrow functions. You can refer to a function's arguments inside that function by using its arguments object. It has entries for each argument the function was called with, with the first entry's index at 0 . The arguments object is not an Array .

How do you turn something into an array in JavaScript?

By using Array. from() method: This method returns a new Array from an array like object or iterable objects like Map, Set, etc.


2 Answers

ES6 using rest parameters

If you are able to use ES6 you can use:

Rest Parameters

function sortArgs(...args) {    return args.sort(function (a, b) { return a - b; });  }    document.body.innerHTML = sortArgs(12, 4, 6, 8).toString();

As you can read in the link

The rest parameter syntax allows us to represent an indefinite number of arguments as an array.

If you are curious about the ... syntax, it is called Spread Operator and you can read more here.

ES6 using Array.from()

Using Array.from:

function sortArgs() {    return Array.from(arguments).sort(function (a, b) { return a - b; });  }    document.body.innerHTML = sortArgs(12, 4, 6, 8).toString();

Array.from simply convert Array-like or Iterable objects into Array instances.



ES5

You can actually just use Array's slice function on an arguments object, and it will convert it into a standard JavaScript array. You'll just have to reference it manually through Array's prototype:

function sortArgs() {     var args = Array.prototype.slice.call(arguments);     return args.sort(); } 

Why does this work? Well, here's an excerpt from the ECMAScript 5 documentation itself:

NOTE: The slice function is intentionally generic; it does not require that its this value be an Array object. Therefore it can be transferred to other kinds of objects for use as a method. Whether the slice function can be applied successfully to a host object is implementation-dependent.

Therefore, slice works on anything that has a length property, which arguments conveniently does.


If Array.prototype.slice is too much of a mouthful for you, you can abbreviate it slightly by using array literals:

var args = [].slice.call(arguments); 

However, I tend to feel that the former version is more explicit, so I'd prefer it instead. Abusing the array literal notation feels hacky and looks strange.

like image 101
Jonathan Fingland Avatar answered Sep 19 '22 07:09

Jonathan Fingland


It's also worth referencing this Bluebird promises library wiki page that shows how to manage the arguments object into array in a way that makes the function optimizable under V8 JavaScript engine:

function doesntLeakArguments() {     var args = new Array(arguments.length);     for(var i = 0; i < args.length; ++i) {         args[i] = arguments[i];     }     return args; } 

This method is used in favor of var args = [].slice.call(arguments);. The author also shows how a build step can help reduce the verbosity.

like image 30
jbmusso Avatar answered Sep 22 '22 07:09

jbmusso