How to JavaScript | Because '5' === 5

Understanding the Arguments Object in JavaScript

07 Apr 2019

What is the ‘arguments’ object?

Simply put, the arguments object contains all arguments or parameters passed into the current function. It’s worth emphasizing that arguments is only defined and accessible from within the scope of a function. For example:

  
    function helloAll() {
      for (let i = 0; i < arguments.length; i++) {
        console.log('Hello', arguments[i])
      }
    }

    helloAll('Jack', 'Jeremy', 'James', 'Jill', 'Jocelyn')
    /*
      Hello Jack
      Hello Jeremy
      Hello James
      Hello Jill
      Hello Jocelyn
    */

The arguments object is NOT an Array

arguments is like an Array, in that one can iterate over it using indices, and that it also defines a length property that tells you how many values it contains. That’s where the comparison ends, however. You can see this if you run typeof arguments // => object.

Why use the arguments object?

In the past, arguments was typically used when one wanted to create a function with a variable number of arguments. Looking back at the previous example helloAll is officially defined with 0 arguments- though we end up passing in 5. In reality, JavaScript (for better or for worse) does not care how many arguments actually get passed into the function, which when handled carefully can be used to your advantage.

Examples

You might want your function to accept any number of arguments when you’re calculating or dealing with the aggregation of data. Let’s say we wanted a function that multiplied any amount of numbers by one number, and added them together.

  
    function multiplyAllBy(multiplier) {
      let result = 0
      for (let i = 1; i < arguments.length; i++) {
        result = result + multiplier * arguments[i]
      }

      return result
    }

    multiplyAllBy(10, 1, 2, 3) // 60

Notice how the index for arguments in the for loop was started 1 this time. Everything that gets passed into the function gets added to arguments. In this case we didn’t want the multiplier to get multiplied by itself, so we had to skip the first (0) index.

In general however, if you need a variable amount of arguments the same result can be accomplished by just specifying an additional argument that you expect to be an Array instead.

  
    function multiplyAllBy(multiplier, numbers) {
      let result = 0
      for (let i = 0; i < numbers.length; i++) {
        result = result + multiplier * numbers[i]
      }

      return result
    }

    multiplyAllBy(10, [1, 2, 3]) // 2nd argument is passed in as an Array

Using the ES6 Spread Operator

Nowadays there are better ways to do this using ES6 JavaScript in browsers that support it, via the spread operator. Here’s the same multiplyAllBy example rewritten to accept a variable number of arguments using array spreading.

  
    function multiplyAllBy(multiplier, ...numbers) {
      let result = 0
      for (let i = 0; i < numbers.length; i++) {
        result = result + multiplier * numbers[i]
      }

      return result
    }

    multiplyAllBy(10, 1, 2, 3) // 60

The ...numbers argument tells JavaScript that numbers is a variable amount of arguments, and as a result will be available to the function as a list. This allows us to call the function like multiplyAllBy(10, 1, 2, 3) and still have 1, 2, 3 received as an Array.

When can arguments be used?

I mentioned at the top that in order to use arguments, the current scope in execution must be one within a function. The exception to this is arrow functions, which the ES6 JavaScript spec has defined that arguments should not be included in, since arrow functions do not create their own lexical scope.

In Summary

  • arguments is an Array like object that contains all of the parameters received by a function
  • arguments is not available within ES6 arrow functions
  • When using ES6 JavaScript, prefer using the spread ... operator over arguments

Related Posts