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

Getting to know the arguments object

Before proceeding, let's delve into the arguments object. This array-like object contains the parameters of a function. However, it does not share the array methods, making conversion a crucial step in handling the arguments object.

The beauty of rest parameters

ES6 brought us rest parameters, a modern way to turn function parameters into an array:

function convertArgsWithRest(...args) {
  return args; // done! That was easy, right? 😎
}


The notation ...args here represents any number of arguments. It marries the functionality and readability of array without any need for conversion, as long as your environment supports ES6 and later.

Convert using Array methods

For those in a non-ES6 environment, we can call upon Array.prototype methods. The "slice" method acts as a powerful transformer of the arguments object into an array:

function convertArgsWithSlice() {
  return Array.prototype.slice.call(arguments); // A little verbose, isn't it?
}


But beware; this method is not ideal for performance-heavy situations according to optimization guidance such as the ones provided by Bluebird promise library.

Practical tools: Array.from and other tricks

If you favor clean code, then Array.from() should be your weapon of choice:

function convertArgsWithArrayFrom() {
  return Array.from(arguments); // Voilà! Elegant and easy.
}


Array.from() has the added benefit of converting any iterable or array-like objects, making it a one-stop solution for array conversion. Libraries like jQuery also simplify this process by providing utility functions such as $.makeArray(arguments), enhancing code readability.

Watch out for performance pitfalls

Certain techniques can burden performance when dealing with the arguments object:

• Using Array.prototype.concat.apply([], arguments) burdens the performance due to unnecessary array creation.
• If you want to efficiently merge new arguments into an existing array, use Array.prototype.push.apply(array, arguments) instead.

Another aspect to watch out for is the size of your arguments object, especially before using Array.apply(null, arguments) which can lead to unexpected behavior.

When all else fails: manual loops

A manual loop provides complete control over conversion, making it ideal for performance-sensitive code:

function convertArgsManually() {
  var argsArray = [];
  for (var i = 0; i < arguments.length; i++) {
    argsArray.push(arguments[i]); // Old school, but never fails!
  }
  return argsArray;
}


Although it lacks the elegance of other methods, its predictable performance makes this method a reliable fallback.

For the performance enthusiasts

If you're interested in diving deeper into strategies for optimizing arguments object handling, the V8 engine's documentation, as well as the wiki from Bluebird promise library provide in-depth guides:

• Optimization killers - Bluebird
• V8 optimization tips - V8 Docs

Writing robust code: some best practices

Given the array of methods mentioned, the following practices are recommended:

• Use ES6 syntax where possible and beneficial.
• For a clean, readable, and ES5-compatible solution use Array.from(), risking some potential performance hit.
• Be mindful of any performance aspects and test your code in different conditions and environments to choose the best method of conversion.