spread and rest operators | Chinese Rule of Eight

function addFourNumbers(a, b, c, d) {

return a + b + c + d;

}

Usually, when we execute such functions, we have to put in the parameters one by one…

1	addFourAges(18, 48, 24, 23);

1 2	var ages = [24, 23, 45, 54]; addFourAges(ages[0], ages[1], ages[2], ages[3]);

In es5, we would use the apply function to do this:

1 2	var ages = [24, 23, 45, 54]; addFourAges.apply(null, ages);

By definition, function prototype apply takes in all the parameters as an array. Hence we make use of the apply function to pass in parameters using an array.

However in es6, you can simply use the spread operator:

1	addFourAges(...ages)

Rest Parameters

Every function has an object called arguments.
It is an array-like object that keeps track of all dynamic number of parameters throw into the function.

An array-like object simply means that the object holds:

1) numerical property either in string or integer
2) has length property

{

9:"testing 1 2 3",

1:"hohoho merry xmas",

2:"happy new year",

length: 10,

}

You can convert Array-like Objects to their Array counterparts using Array.prototype.slice

This is so that we can convert arguments object into an array.

1) We know that slice creates a new array, with shallow data.
2) We also know that there is a Function prototype called call.

functionName.call(value of this, arg1, arg2…)When using call, we go someFunctiono.call(PersonObj), and it would execute function DisplayInfo using PersonObj as ‘this’

We want to execute function Array.prototype.slice usinga function’s arguments object as ‘this’:
– Array.prototype.slice.call(arguments)

let tmp5 = Array.prototype.slice.call({

9:"testing 1 2 3",

1:"hohoho merry xmas",

2:"happy new year",

length: 10,

});

tmp5 Array(10) [ undefined, "hohoho merry xmas", "happy new year", undefined, undefined, undefined, undefined, undefined, undefined, "testing 1 2 3" ]

arguments.slice() does not work.

arguments is an array-like object. And js objects do not have the prototype function slice().

let tryIt = {

9:"testing 1 2 3",

1:"hohoho merry xmas",

2:"happy new year",

length: 10,

}.slice()

TypeError: ({1:"hohoho merry xmas", 2:"happy new year", 9:"testing 1 2 3", length:10}).slice is not a function

Thus, in our example, we simply use Array.prototype.slice.call to create a new array shallowly from the arguments object.
Once we get that array, we simply iterate through it and do what we like.

function isFullAge5() {

var argsArr = Array.prototype.slice.call(arguments);

console.log(argsArr); // now argsArr is an array of the paramters you have passed in

argsArr.forEach(function(cur) {

console.log((2019 - cur) >= 18);

});

}

call isFullAge5 with various parameters

1	isFullAge5(1980, 1990, 2000, 2010);

[ 1980, 1990, 2000, 2019 ]
true
true
true
false

es6

Using spread operator is same as let arr = Array.prototype.call(arguments) where arguments is an object.

Even better is if we put variables in front. Doing so put the first parameter into ‘limit’. And then mask the
rest of the parameters into array years.

function isFullAge6(limit, ...years) {

console.log(years) // the spread operator will collect all parameters and insert them into array 'years'

// this is the same as using let years = Array.prototype.slice.call(arguments)

years.forEach(cur => console.log( (2019 - cur) >= limit));

}