Rest Parameter and Spread Operator in ES6 - How they work

rest-parameter-and-spread-operator.js

/**
ES6 has provided us two very powerful methods - Rest Parameters and Spread Operators.
In this example I have tried to explain these methods, how they work and what we can get out of them.
Rest Parameter and Spread Operator have made code clean and easier to understand.
With these methods, the development time has decreased considerably as well.

Before going into code example, some key points which I want to mention.

 1. Both Rest Parameter and Spread Operator use the sanme ‘...’ syntax.

 2. Rest Parameters are entirely different from REST API.
 3. Rest Parameters are used as function arguments.
 4. Rest Parameters creates an Array. Hence array method like map() could be applied to it.
 5. Rest Parameter is a huge boost over old conventional JavaScript arguments variable.
 6. Rest Parameter must be the last argument
 7. Rest Parameter converts list of arguments in an Array.

 8. Spread Operators are used in function calls.
 9. Spread Operator works exactly reverse of Rest Parameter. Like:
10. Spread Operator converts an Array into List.
11. Spread Operator can merge multiple arrays into one with a single line of code.
12. Spread Operators are used for destructuring.

Let's go deeper into Rest Parameters and Spread Operators with some simple examples.
*/

// ************ Rest Parameters ************ //

function person(firstName, lastName, street, city, zipCode) {
 console.log(firstName, lastName, street, city, zipCode);
}

person('Subrata', 'Sarkar', 'Some street', 'Kolkata', '712232');

/*
Output:
----------------
Subrata
Sarkar
Some street
Kolkata
712232
*/

/**
The above function has 5 arguments, meaning we cannot pass more information than what paramteres provided by the function.
This is what we call the conventioanl method of writing JavaScript functions.

Let's call the above function in a different way now by not passing all parameter values...
*/

person('Subrata', 'Sarkar', 'Some street');

/*
Output:
----------------
Subrata
Sarkar
Some street
undefined // we did not pass a value to 'city' parameter, so it is returned undefined
undefined // we did not pass a value to 'zipCode' parameter, so it is returned undefined
*/

// Now, let's rewrite the above function and make the last argument an ES6 Rest Parameter.

function person(firstName, lastName, ...location) {
  console.log(firstName, lastName, location);
}

person('Subrata', 'Sarkar', 'Some street', 'Kolkata', '712232');

/*
Output:
----------------
Subrata
Sarkar
['Some street', 'Kolkata', '712232']
*/

/**
The above function has two strict parameters: firstName and lastName. But whatever we are passing after that
will be assigned to the Rest Parameter (...location) and is supposed to convert the values into an array.

If it really does we should also be able to
1. Check the length of it
2. Apply a map() method
*/

function person(firstName, lastName, ...location) {
 console.log( firstName, lastName ); 
 location.map( addressPart => {
    console.log( addressPart );
 } );
 console.log( 'Length of location: ' + location.length ); 
}

person('Subrata', 'Sarkar', 'Some street', 'Kolkata', '712232');

/*
Output:
----------------
Subrata
Sarkar
Some street
Kolkata
712232
Length of location: 3
*/

/**
IMPORTANT TO NOTE:
Rest Parameters must be at the end of argument list.
Since Rest Parameter gathers all "remaining arguments", the following has no sense
*/
function person( firstName, ...location, lastName ) {
 ...
}
 
// ************** Spread Operators ************** //
 
/**
As mentioned above a Spread Operator does exactly the opposite of what a Rest Parameter does.
It converts an Array to list.
Let's take a few example and see what it actually does.
*/
 
const arr = [30, -10, 5, 7];
console.log( Math.random() * Math.max( arr ) );

/**
The above code snippet will throw an error since we are trying to extract the max value from an array
So to fix this problem we first need to convert the array into a list.
We do this by using a Spread Operator.
*/

const arr = [30, -10, 5, 7];
console.log( 'Random number based on the maximum value is: ' + Math.random() * Math.max( ...arr ) );
 
// The Spread operator above applied to 'arr' which converts the array to a list which then we can use for finding the max value.

/**
Output:
----------------
Random number based on the maximum value is: 1.020483135825071
*/

// Finding maximum value from more than one array using Spread operator

const arr1 = [30, -10, 5, 7];
const arr2 = [90, 3, 78];

console.log( 'The maximum number is: ' + Math.max( ...arr1, ...arr2 ) );

/**
Output:
----------------
The maximum number is: 90
*/

// Merging multiple arrays into one

function mergeArray() {
 const arr1 = [30, -10, 5, 7];
 const arr2 = [90, 3, 78];
 const arr3 = ['Some string value'];

 console.log( [ ...arr1, ...arr2, ...arr3 ] );
}

mergeArray();

/**
Output:
----------------
New array: [30, -10, 5, 7, 90, 3, 78, 'Some string value']
*/