JavaScript Rest Parameters and Spread Syntax

In this article, we will see what the rest parameters and what spread syntax is all about.

The example below is a summary of this article.

const peopleGrades = (index, ...numbers) => {  /* ...rest */
  const array = [ ...numbers ]; // ...spread
  return array[index]; // 8 => [ 4, 5, 2, 8, 2 ][3]
};

peopleGrades(3, 4, 5, 2, 8, 2); // 8

---

Rest Parameter

A function will only perform operations on parameters and variables in the function body.

See the example below:

const sum = (a, b) => {
  return a + b; // 2 + 3
}

console.log( sum(2, 3, 1, 10, 4) ); // 5

Notice the operation in the function body is based on the number of parameters, not the number of arguments in the calling function.

We can re-consider passing all arguments including 1, 10, 4 to the parameter for a returned computation in the function body.

See the example below:

const sum = (a, b, c, d, e) => {
  return a + b + c + d + e; // 2 + 3 + 1 + 10 + 4
};

console.log( sum(2, 3, 1, 10, 4) ); // 20

Passing arguments to the parameters shown above is not advisable. In JavaScript, it is advisable to use the Rest parameter to represent more than three parameters.

A rest parameter looks like ...args. The three dots ... represents more parameters.

See the syntax below:

func = (...args) => {
  ...
};

func(args);

Where args = array of parameters name.

The example below proves that the args is a list of arguments.

const sumFunc = (...args) => {
  return args; 
};

// let's gather all arguments into the array 
console.log( sumFunc(2, 3, 1, 10, 4) ); // [ 2, 3, 1, 10, 4 ]

Since args is an array of arguments, we can sum each argument in the array.

See the example below:

const sumFunc = (...args) => {
  const sum = args[0] + args[1] + args[2] + args[3] + args[4];
  return sum; // 2 + 3 + 1 + 10 + 4
};

// let's sum all arguments in the array 
console.log( sumFunc(2, 3, 1, 10, 4) ); // 20

See another example below:

const sumFunc = (sum = 0, ...args) => {

  for (let arg of args) {
    sum = sum + arg ;
  }

  return sum;
};

console.log( sumFunc(2, 3, 1, 10, 4) ); // 20

Let's see another example below:

const employee = (name, ...titles) => {
  const personTitles = `${name} is a ${titles[0]}, 
  ${titles[1]}, ${titles[2]}, and ${titles[3]}`;
  return personTitles;
};

// let's gather all arguments into array 
console.log(
  employee('John', 'web developer', 'doctor',
    'consultant', 'professor')
);

The ...args must always be the last parameter.

The example below will be invalid.

const employee= (...titles, name) => {
  const personTitles = `${name} is a ${titles[0]}, 
  ${titles[1]}, ${titles[2]}, and ${titles[3]}`;
  return personTitles;
};

console.log( 
  employee('web developer', 'doctor', 
  'consultant', 'professor', 'John')
  ); // SyntaxError: Rest parameter must be last formal parameter

---

Spread Syntax

The spread works on iterable like strings, arrays, objects, etc.

The spread syntax is quite different from the rest syntax.

See the example below:

const staff = (str) => {
  const employee = [ ...str ];
  return employee;
};

console.log( staff('Bello') ); // [ 'B', 'e', 'l', 'l', 'o' ]

See another example below:

const staff = (recruiter) => {
  const batch1Recruits = [ 'John', 'Sarah', 'Angelina', 'Tom' ];
  const batch2Recruits = [ 'Bob', 'Jack', 'Lucky', 'Ali' ];
  const newEmployees = [ recruiter, ...batch1Recruits, ...batch2Recruits ];
  return newEmployees;
};

console.log( staff('Patricia') );
/*
[
  'Patricia', 'John',
  'Sarah',    'Angelina',
  'Tom',      'Bob',
  'Jack',     'Lucky',
  'Ali'
]
*/

The spread syntax works for iterable - string, arrays, objects, maps, sets, etc

Let see one last example, but on an object:

const myDetails = { age: 27, isDoctor: false };

const dataBase = { name: 'Bello', ...myDetails };

console.log(dataBase);
// { name: 'Bello', age: 27, isDoctor: false }

Happy coding!!!

---

---