The arguments object

The Arguments object is a special local variable in function (non-arrow functions). It is described in ECMA262 as follows:

Its array index property maps to the formal parameter binding of its related function call

We can see what it does, depending on the parameters of the function, in the example below

function test(){ console.log(arguments); } the test (1, 2); Test (1, 2, 3, 4);Copy the code

As you can see from the output of the Arguments object

  • Arguments as the value of the actual argument passed to the function
  • The value of index corresponds to the order in which the actual parameters are passed
  • Functions have their own arguments objects for each execution

Arguments and array instances are similar in that they both hold values in this index:value implementation, but their __proto__ indicates that they are not of the same type.

Arguments archetypes refer to Object and array archetypes refer to array, so arguments are technically not an array.

Arguments and array can be summarized as follows:

With:

  • Both have built-in length attributes and store values as index:value

Vision:

  • The arguments archetype is Object, so you can’t call the various operation methods on the Array archetype
  • Arguments has built-inSymbol(Symbol.iterator)attribute

Iterator (Symbol. Iterator); iterator (Symbol. Iterator); Of traversal, so it can be converted to an array object.

The arguments to Array

Array.prototype.slice.call(arguments);
Copy the code
[].slice.call(arguments);
Copy the code

The array.prototype. slice method does not require this to be an Array Object, as long as this has a length attribute and is converted to an Array of the form index:value.

ECMA262-sec-array.prototype.slice

So change the current slice method to Arguments with call and you will return a new array converted from arguments. We can now operate on the parameters of the function.

Mdn-arguments JavaScript Arguments object overview

Arguments performance issues

For performance, it appears that accessing named arguments is also faster than accessing the arguments object in all the major browsers. In this jsperf performance test that just sums the first three arguments passed to a test function, using the named arguments was 2-8x faster than using the arguments object. The exact performance difference likely depends upon exactly what the function is attempting to do, but the arguments object definitely looks slower.

From a performance perspective: accessing named parameters is much faster than accessing arguments objects in all major browsers. In JS performance testing, it was concluded that using named parameters in test methods is 2-8 times faster than using arguments objects. The speed of optimization may depend on the specific implementation of the function, but arguments objects are obviously inefficient.

Optimization killers

Is it a bad practice to access the arguments object to every function that takes parameters?

Rest Parameter

function sum(. theArgs) {
  return theArgs.reduce((previous, current) = > {
    return previous + current;
  });
}

function(a, b, ... theArgs) {
  / /... TheArgs holds the rest of the arguments
}
Copy the code

Arguments

  • The remaining arguments contain only arguments that have no corresponding parameters, whereas the Arguments object contains all arguments passed to the function.
  • The Arguments object is not a real Array and the remaining arguments are real Array instances, meaning you can use all the Array methods directly on it, such as sort, Map, forEach, or POP.
  • The Arguments object also has additional properties (such as the Callee property).
  • The remaining parameters must be placed last

MDN-Rest_parameters