Rest Parameter In JavaScript Function

in STEMGeeks2 years ago


Image Source

Usually while dealing with function, we specify the same number of arguments as specified in the function parameters. But when we don't know how many parameters to write in a function when number of arguments is unknown, we use the concept of Rest parameter. This is a newly introduced feature of JavaScript ES6 and is one of the collest feature introduced. Lets say you want user to enter any number they like and you want to find largest or smallest number or sum of all number that user entered using function then you use rest parameter. Because you don't know how many parameter to write as user can pass arbitrarily any number of arguments.

Now lets discuss the basic syntax of rest parameter. To use rest parameter, you simply declare that as the last parameter in the function declaration. A simple syntax will look something like this:

function func_name(first_parameter, ...rest_parameter_name)
 // Body of Function.

Three dots are used before the rest-parameter. The term first_parameter is known as non-rest parameter and you can use any number of non-rest parameters according to your program. When you passed the argument to the function, these arguments are assigned to the non-rest parameter and the remaining to the rest-parameter. Whatever the arguments you specify for the rest parameter, JavaScript builds them into an array. So, you have flexibility to work with any array methods for these rest parameters as well.

We will see the practical example of rest parameter by finding the largest number among a group of numbers. As I discussed about for/of loop in my previous tutorial just before this, I would also use this concept as well since rest parameter works with array and such loop makes task easier to work with array of data.

<!DOCTYPE html>
<html lang="en">
<title>Rest Parameter</title>

    function findLargest(...nums)
        largestValue = nums[0];

        for (var i of nums)
            if (i >= largestValue)
                largestValue = i;

        document.write("<h3>" + "The largest value among these number is: " + largestValue + "</h3>")

    findLargest(30, 40, 500, 60, 34, 90, 23, 120, 230, 70);

I had't use any non-rest parameter. You can do whatever you like but it works the same way. First we declared the largest value to be the first element of our rest_parameter array which is 30. Then we loop over the each value of the array inside where we work with if conditional checking if the value of array at each iteration is greater than or equal to the largest value we defined above. If it is the largest then largestValue is replaced by the value of array at that iteration. After the loop is terminated, we print out the largest value.

If you run this code and see the output in the browser, it would print 500 as it is the largest among all the numbers that we passed as an argument.