# JavaScript Rest Parameters and Spread Syntax

Mar 24, 2021·

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

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!!!