What is the meaning of "...args" (three dots) in a function definition?

Question

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?

Hypaesthesia

... is called the spread operator. – Freyah

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. – Hobnail

It is the new syntax introduced in ES6. Please see the documentation here developer.mozilla.org/en/docs/Web/JavaScript/Reference/… – Tail

Rest parameters and spread syntax A good tutorial I found. – Aoristic

Does this answer your question? Spread Syntax vs Rest Parameter in ES2015 / ES6 – Rakehell

Answer 1

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)? .

Existence

Answer 2

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.

Freyah

... is not an operator and it is nothing to do with spread. – Existence

Answer 3

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

Klingel

Your code, even if correct, is unfortunatelly not answering to OP's question. OP has rest parameters (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…), you are using the spread operator. You can see the ... for him is inside the function signature, more exactly when defining function parameters. You pass ...numbers when calling the function, which is a different moment. – Springing

Answer 4

means pass all values (useful if have unknown# of items)

sample code

console.log(sum(1, 2, 3, 4));  // expected output: 10

function sum(...allItems) { 
  let total = 0;
  for (const item of allItems) {
     total += item;
   }
   return total;
}

Peccary

Answer 5

If you know some Python syntaxes, it is exactly the same as *args. Since *args (Python) is tuple object and Javascript has no tuple like Python, ..args is an Array object.

Salliesallow

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Chamblee

Answer 6

It's called 'rest parameter', you can use rest parameter to pass unspecified number of arguments as an array, And a function can have only one rest parameter and it have to be the last parameter for the function

    function sum(...args){
    let output = 0;
     for(const num of args){
     output += num;
     }
        return output;
     }

     console.log(sum(2,4,8));

here it takes the argument that passed on sum as an array and sum the output and return it

Swearingen