Can someone tell what is "..." in the below code in the "Intro to Angular" example?

getHeroes() {
    this.backend.getAll(Hero).then( (heroes: Hero[]) => {
      this.logger.log(`Fetched ${heroes.length} heroes.`);
      this.heroes.push(...heroes); // fill cache
    });

Can someone tell what is "..." in the below code in the "Intro to Angular" example?

getHeroes() {
    this.backend.getAll(Hero).then( (heroes: Hero[]) => {
      this.logger.log(`Fetched ${heroes.length} heroes.`);
      this.heroes.push(...heroes); // fill cache
    });

• javascript

• 1 developer.mozilla.org/nl/docs/Web/JavaScript/Reference/… – Shilly Commented Feb 8, 2017 at 16:16

4 Answers 4

This has nothing to do with jQuery or Angular. It's a feature that was introduced in ES2015.

This particular use of ... doesn't actually have an official name. A name that is in line with other uses would be "spread argument" (a generic term would be "spread syntax"). It "explodes" (spreads) an iterable and passes each value as argument to the function. Your example is equivalent to:

this.heroes.push.apply(this.heroes, Array.from(heroes));

Besides being more concise, another advantage of ... here is that it can be more easily used with other concrete arguments:

func(first, second, ...theRest);

// as opposed to the following or something similar:
 func.apply(null, [first, second].concat(Array.from(heroes)));

It is a JavaScript feature called Rest Parameters. By using it your function can take any number of arguments. You put the three dots just before the argument (without a whitespace character) and the mechanism spreads it for you as if it was a list of several arguments. In Eloquent Javascript you have a good example of it.

let numbers = [5, 1, 7];
console.log(max(...numbers));
// -> 7

It's a copy of the original array

let args = [7, 3, 8];
var [h] = args.reverse(); // args is now 8, 3, 7

whereas

var [h] = [...args].reverse(); // args is still 7, 3, 8

It can also be used to specify the remaining values of an array

var [first, ...rest] = args; // first = 7, rest = [3, 8]

As per the title of the question, the use of ... in a function declaration (within parenthesis) is that of a rest operator or rest parameter,In order to help us create more flexible functions, ES6 introduces the rest parameter for function parameters.

With the rest parameter, you can create functions that take a variable number of arguments. These arguments are stored in an array that can be accessed later from inside the function.

Example: 1

function foo(...args) {
  return "You have passed " + args.length + " arguments.";
}

console.log(foo(0, 1, 2,4)); // You have passed 4 arguments.
console.log(foo("hello", null, [1, 2], { })); // You have passed 4 arguments.

Example 2:

function foo(...args){
     args.forEach(function(arg){
        console.log(arg);
     })
   }

   foo(2,3,4,5,6);

The rest parameter eliminates the need to check the args array and allows us to apply map(), filter(), reduce() and other array Higher Order functions on the parameters array.

OTHER USE CASES OF ... operator :

1. Used as spread operator which is the reverse of rest operator.

   const arr = [6, 89, 3, 45]; const maximum= Math.max(...arr); console.log(maximum);

2. ... operator is used to copy the array or an object pretty easily and is quite helpful in javascript frameworks and libraries like angular and react respectively.

   const arr1 = [1,2,3,4];
   const arr2 = [...arr1];
   console.log(arr2);//  [1,2,3,4];
   
   const obj1 = {
     name:'john',
     age:25
   }
   
   const obj2 = {...obj1};
   console.log(obj2); // Now obj2 is new object and is copy of obj1 (non-mutated 
   way)