29

It was really confusing for me to read this syntax in Javascript:

router.route('/:id')
.put((...args) => controller.update(...args))
.get((...args) => controller.findById(...args));

What does ...args mean?

Bergi
  • 513,640
  • 108
  • 821
  • 1,164
Cesar Jr Rodriguez
  • 1,244
  • 3
  • 17
  • 26
  • 3
    `...` is called the spread operator. – bejado Feb 12 '17 at 05:58
  • 6
    Usually, `...args` means "any number of values". For example, you could pass `null` or `1,2,3,4` - it would not matter and the method is smart enough to deal with it. – Tigger Feb 12 '17 at 05:59
  • 1
    It is the new syntax introduced in ES6. Please see the documentation here https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/rest_parameters – Diode Feb 12 '17 at 06:07
  • [Rest parameters and spread syntax](https://javascript.info/rest-parameters-spread) A good tutorial I found. – Rick Feb 12 '20 at 12:07
  • 3
    Does this answer your question? [Spread Syntax vs Rest Parameter in ES2015 / ES6](https://stackoverflow.com/questions/33898512/spread-syntax-vs-rest-parameter-in-es2015-es6) – Henke Mar 16 '21 at 14:45

3 Answers3

41

With respect to (...args) =>, ...args is a rest parameter. It always has to be the last entry in the parameter list and it will be assigned an array that contains all arguments that haven't been assigned to previous parameters.

It's basically the replacement for the arguments object. Instead of writing

function max() {
  var values = Array.prototype.slice.call(arguments, 0);
  // ...
}
max(1,2,3);

you can write

function max(...value) {
  // ...
}
max(1,2,3);

Also, since arrow functions don't have an arguments object, this is the only way to create variadic (arrow) functions.

As controller.update(...args), see What is the meaning of "foo(...arg)" (three dots in a function call)? .

Deja
  • 3,278
  • 2
  • 18
  • 46
Felix Kling
  • 705,106
  • 160
  • 1,004
  • 1,072
13

Essentially, what's being done is this:

.put((a, b, c) => controller.update(a, b, c))

Of course, what if we want 4 parameters, or 5, or 6? We don't want to write a new version of the function for all possible quantities of parameters.

The spread operator (...) allows us to accept a variable number of arguments and store them in an array. We then use the spread operator again to pass them to the update function:

.put((...args) => controller.update(...args))

This is transparent to the update function, who receives them as normal arguments.

bejado
  • 1,330
  • 11
  • 19
  • 4
    [`...` is not an operator](http://stackoverflow.com/questions/37151966/what-is-spreadelement-in-ecmascript-documentation-is-it-the-same-as-spread-oper/37152508#37152508) and it is nothing to do with spread. – Felix Kling Feb 12 '17 at 15:39
2

The meaning of “…args” (three dots) is Javascript spread operator.

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// expected output: 6
Ramesh
  • 1,663
  • 2
  • 20
  • 30