Help with Spread and rest operator

JavaScript
1

Hey Guys,
If anyone could help me with a trick or way of understanding spread and rest operators.
I am not able to comprehend them.
Thanks.

2

I think ā€˜restā€™ is probably the simpler concept because it can only be used when specifying parameters.

Pretend you have a function that requires at least two parameters but can handle any number of inputs. So the function could be something like this:

function flexSum(first, second, ...more) {
//this function requires at least 2 params 'first' and 'second' but is flexible 
// and can handle more parameters

  return first + second + more.reduce( (a,b) => a+b);
}

This function for eg will give me the sum of 2 or more numbers.
(while still forcing me to give at least 2)

Basically ā€˜restā€™ is used whenever you donā€™t want to force the caller to provide a fixed number of arguments.

Does that help for ā€˜restā€™? If yes, we can move on to ā€˜spreadā€™ which is more complicated.

1 Like
3

Thanks i seem to slowly understand it.
We can now move on to ā€œspreadā€.

4

great, so spread is actually the same operator that you know as rest ā€˜ā€¦ā€™ but instead of putting it inside a function definition you can use it as an input to a function call or in similar scenarios.
But first, what does spread do?
As I understand, spread (those three dots) take an array and ā€˜spread it outā€™ (like spreading jam or butter on toast).
so if you have the following lines of code which donā€™t use spread:

let arr=[1,2,3];
let newArr = [];
newArr.push(arr);

these will give us the following values inside of newArr
[[1,2,3]]

notice how there are two left and two right square brackets meaning that we have a nested array?

but what if i did this instead:

let arr=[1,2,3];
let newArr = [];
newArr.push(...arr);

something different happens and we get newArr now equal to
[1,2,3]

notice that this is not a nested array structure but just a plain vanilla ā€˜flatā€™ array.
This is because the ā€˜spreadā€™ operator spread out my array so the 3rd line of code I used it in is essentially equivalent to me writing

newArr = [arr[0],arr[1],arr[2]];

but obviously the spread operator is a lot more concise way of doing that and also flexible (it just gives the comma separated list of values automatically).

Other ways to use it:

letā€™s say I want to call the function flexSum that I defined earlier. I can do it like this:

flexSum(arr[0],arr[1],arr[2]); //this will add all the numbers for me

or I can do it a much quicker way:

flexSum(...arr); // which spreads out the values in the array so they are comma separated and accepted by the flexSum function

Iā€™ve run out of examples right now but let me know if you have any follow up question. Best thing to do is to try to use this operator so you can understand it. For eg. Finish writing the following code:

let first = 5;
let second = 6;
let rest = [7, 8, 9];
// add something below this line to call flexSum *once* and add all the given variables: first and second and rest
1 Like
5

The answer to the example should be:

flexsum(first, second, ā€¦rest);

right?

1 Like
6

yup. This is correct.
An alternative (less efficient) way is
flexsum(first, second, rest[0], rest[1], rest[2]);

so hopefully you see the advantage of using spread and restā€¦

1 Like
7

Yes, i seem to get hang of it now .
Thanks.