CuteMachine

Rest Parameters In JavaScript

How can we write a function in JavaScript that takes any number of arguments?

Well, it turns out that you don't have to do anything.

Rest Parameter vs. Arguments Object

You can declare a function with no parameters and call it with, say, two arguments.

function foo() {
  // do something
  return true
}

foo(1, 'two')    // returns true
foo()    // returns true

This code is working without any issues, although we didn't declare any parameters for the function, we can call it with as many arguments as we like.

You even can access the passed in arguments via the arguments object.

function bar() {
  return arguments.length
}

bar()    // 0
bar(1)    // 1
bar('one', 'two')    // 2

But the arguments object has some drawbacks. The first thing that comes to mind is that arguments is not a real array. It is only array-like. Though it has a length property, it does not have the methods you normally find on an array. For example, it is missing map(), forEach(), and filter().

Before ES6 introduced the rest parameter, you could see the usage of the arguments object everywhere. Nowadays, JavaScript developers prefer using the rest parameter.

JavaScript's Rest Parameter

Like the JavaScript Spread Operator, the rest parameter is three points, followed by the parameter's name. Often the name is just rest: ...rest

There is no space between the operator and the parameter name.

Here is a simple example:

function foo(...rest) {
    // do something
}

Here is another example of a function that can receive an arbitrary amount of arguments and returns the minimum of those values.

function min(...rest) {
  let minimum = Infinity
  rest.forEach(item => {
    if (item < minimum) {
      minimum = item
    }
  })
  return minimum
}

min()    // Infinity
min(13, 2, 4)    // 2

In the above example, you can see that rest is an array that can be iterated with the forEach() method. Much better than the old arguments object.

You will also have noticed that we did not get an error when we called min() without passing an argument. The code works because the rest parameter is initialized to an empty array automatically. You cannot provide a default value for the rest parameter, because the default is always an empty array. The rest parameter will never be undefined.

If you provide a default value for the rest parameter, you will get a SyntaxError.

// SyntaxError: 
function doSomething(...rest = []) {
  // do something
}

Although it is called rest parameter, you do not have to name the argument rest. You can change the name to args, like so: ...args.

function baz(...args) {
  return args
}

baz()    // []

The rest parameter needs to be the last parameter in the parameter list. This example will not work, you will get a SyntaxError instead, because ...args is not the last parameter.

// SyntaxError: Rest element must be last element
function foo(...args, second) {
  return args
}

Rest Parameter And Spread Operator

Although they look similar, the rest parameter and the spread operator are distinct language features in JavaScript. Please look at my tutorial on the JavaScript Spread Operator to learn more.

Conclusion

There is no good reason to stick to the arguments object when programming vararg functions. Be kind to yourself and use the rest parameter. And if you see the arguments object in your legacy code, replace it with the modern alternative.

Posted on CuteMachine.

Jo's Profile ImageWritten by Jo who lives and works in Frankfurt building digital doodah. Stalk him on Twitter.

TOS • Privacy • Disclaimer