# 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.

```js
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:

```js
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:

```js
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.

```js
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:

```js
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:

```js
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:

```js
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.

```js
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:

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

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

See another example below:

```js
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:

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

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

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

**Happy coding!!!**

---

[![Buy me a Coffee](https://res.cloudinary.com/bizstak/image/upload/v1610317510/ko-fi-trans_fr3su4.png)](https://www.buymeacoffee.com/techstackmedia)

---