Hello, Friends here in this article I will be teaching you to create an calculate function that can take any number of arguments thrown by the user.
If you are creating a function that can take any number of arguments that function has a name called
Variadic functions.
Variadic Functions: Functions are called Variadic when they take an indefinite number of arguments when calling.
Let's go back when ES6 has not introduced the developers were very confused. They were using the Arguments object to implement this feature.
Similar to Array the function's arguments are arranged indexed from zero Arguments object.
Today I will show you to create a variadic function that can accept any number of arguments. using two methods.
The Second one is optional here you have to specify the index position to starts searching from.
Check the above calculate function in this we are not passing any parameter instead of that we are using the local arguments object that store all the arguments for us.
We know that Arguments object is similar to an array but does not have array methods like forEach, map etc.
We have used for of loop to loop the arguments object and to get the sum of all the numbers we have used a variable called num whose value is 0 which is global.
We have used the num variable to add the numbers of the arguments object. then we return the num variable.
We have also used the arguments object built in property which is the length to get the number of arguments.
After that, we have added it to the body with some basic styling.
Rest Parameter is an Array this meant all the array methods can be used like forEach, map, filter etc
Rest Parameter starts with three consecutive dots ... then the name of the parameter. The name which you have given after the prefix that only will become the Rest Parameter. There are no naming restrictions like we see in the arguments object.
Let's Create Calculate Function Using the ES6 Rest Parameter and discuss its pros and cons.
Check the above calculate function in this we are passing the parameter. That parameter, when used with the three dots, will become Rest Parameter and become the array that store all the arguments.
We know Rest Parameter is an Array so all the array methods like map, filter, forEach will work.
We have used the forEach Method to loop the arguments and to get the sum of all the numbers.
We have used a variable called num whose value is 0 which is global.
We have used the num variable to add the numbers of the arguments object. then we return the num variable.
We have also used the Array built-in property which is the length to get the number of arguments.
After that, we have added it to the body with some basic styling.
If you are creating a function that can take any number of arguments that function has a name called
Variadic functions.
Variadic Functions: Functions are called Variadic when they take an indefinite number of arguments when calling.
Let's go back when ES6 has not introduced the developers were very confused. They were using the Arguments object to implement this feature.
What is the Arguments Object?
Arguments object is the array like object which has length property but not all the methods of the Array. This object is present in all non-arrow functions as the local variable.Similar to Array the function's arguments are arranged indexed from zero Arguments object.
Today I will show you to create a variadic function that can accept any number of arguments. using two methods.
- Using Arguments Object
- Using the ES6 Rest Parameter.
Simple Calculate Function Using Arguments Object:
See the Pen Creating variadic function using arguments object by MD M Nauman (@mmnauman) on CodePen.
Check the above calculate function in this we are not passing any parameter instead of that we are using the local arguments object that store all the arguments for us.
We know that Arguments object is similar to an array but does not have array methods like forEach, map etc.
We have used for of loop to loop the arguments object and to get the sum of all the numbers we have used a variable called num whose value is 0 which is global.
We have used the num variable to add the numbers of the arguments object. then we return the num variable.
We have also used the arguments object built in property which is the length to get the number of arguments.
After that, we have added it to the body with some basic styling.
Why we should not use arguments object?
- The Function we have created above does not have any parameter. This will be misleading for the users as in the heading we are saying it accepts infinite arguments but when they see it it doesn't have any parameter.
- Very Confusing for the newbie developers too as they don't know from where the hell this arguments object is coming.
Now I will show you the next and recommended way of doing this task. As of now, the ES6 has become the new standard of JavaScript for coding. Now, most modern browsers support this feature which is known as Rest Parameter.
Rest Parameter (...parameter) :
Rest Parameter is an Array that is made to accept an infinite or indefinite number of arguments. You can think it as an empty box that can store any number of values.Rest Parameter is an Array this meant all the array methods can be used like forEach, map, filter etc
Rest Parameter starts with three consecutive dots ... then the name of the parameter. The name which you have given after the prefix that only will become the Rest Parameter. There are no naming restrictions like we see in the arguments object.
Let's Create Calculate Function Using the ES6 Rest Parameter and discuss its pros and cons.
Check the above calculate function in this we are passing the parameter. That parameter, when used with the three dots, will become Rest Parameter and become the array that store all the arguments.
We know Rest Parameter is an Array so all the array methods like map, filter, forEach will work.
We have used the forEach Method to loop the arguments and to get the sum of all the numbers.
We have used a variable called num whose value is 0 which is global.
We have used the num variable to add the numbers of the arguments object. then we return the num variable.
We have also used the Array built-in property which is the length to get the number of arguments.
After that, we have added it to the body with some basic styling.
Why we should use Rest Parameter over arguments object?
- The Rest Parameter is an array so the array methods will be available for use.
- When we created the function we have used the parameter with the three dots that indicate that we are using this Rest Parameter. By using this parameter user will know that it can accept an indefinite number of arguments.
- This is The ES6 way of doing so we will stick to it.
Conclusion
I have shown you both the ways to create the variadic function. I have also explained to you which to use and why. You can use the old way also but we should always update ourselves.
Try to practice this functions and create apps like calculator, bill creator etc.
That's It, Thanks For Following our Tutorial ''Creating an ES6 Function that accepts infinite Arguments with Example' If you found any difficulty following along with me. Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.
Try to practice this functions and create apps like calculator, bill creator etc.
That's It, Thanks For Following our Tutorial ''Creating an ES6 Function that accepts infinite Arguments with Example' If you found any difficulty following along with me. Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.
No comments:
Post a Comment