Hello everyone, hope you are all doing well. My name is Surya L, and the aim of this blog is to teach you all about Learn Rest and Spread Operator In JavaScript.
Rest Parameter with Function Parameters
- ES6 introduced the rest parameter for function parameters.
- With the rest parameter, you can create functions that take a variable number of arguments.
- These arguments are stored in an array that can be accessed later from inside the function.
Check out this code:
Example1:
function howMany(...args) {
return "You have passed " + args.length + " arguments.";
}
console.log(howMany(0, 1, 2));
console.log(howMany("string", null, [1, 2, 3], { }));
The console would display the strings You have passed 3 arguments. and You have passed 4 arguments..
The rest parameter eliminates the need to check the args array and allows us to apply map(), filter() and reduce() on the parameters array.
Example2:
const sum = (...args) => {
return args.reduce((a, b) => a + b, 0);
}
console.log(sum(12,3))
The Output of above code is 👇
15
Spread Operator to Evaluate Arrays In-Place
ES6 introduces the spread operator, which allows us to expand arrays and other expressions in places where multiple parameters or elements are expected.
The ES5 code below uses apply() to compute the maximum value in an array:
var arr = [6, 89, 3, 45];
var maximus = Math.max.apply(null, arr);
maximus would have a value of 89.
We had to use Math.max.apply(null, arr) because Math.max(arr) returns NaN. Math.max() expects comma-separated arguments, but not an array. The spread operator makes this syntax much better to read and maintain.
const arr = [6, 89, 3, 45];
const maximus = Math.max(...arr);
maximus would have a value of 89.
...arr returns an unpacked array. In other words, it spreads the array. However, the spread operator only works in-place, like in an argument to a function or in an array literal. The following code will not work:
const spreaded = ...arr;
Thanks for reading the blog. Do let me know what you think about it.
You can connect me with Showwcase Twitter Blog GitHub Contact Me
Refernce: I learned this topics in FreeCodeCamp which I explained in minified version