Explain the Rest parameter in ES6

In this article, we will try to understand the details associated with the rest parameter in ES6 which includes the syntax of rest parameters, and how to use this with the help of certain examples.

The rest parameter is an improved way to handle function parameters, allowing us to handle various inputs as parameters in a function. The rest parameter syntax allows us to represent an indefinite number of arguments as an array. With the help of a rest parameter, a function can be called with any number of arguments, no matter how it was defined. Rest parameter is added in ES2015 or ES6 which improved the ability to handle parameter.

Let us first understand the basic details which are associated with the Rest parameter.

function display(first_argument,...other arguments) {
  console.log(first_argument);
  
  console.log(other arguments);
}

display(1,2,3,4,5,6);

Rest Parameter:

• The rest parameter allows us to handle more inputs which is getting passed inside a function in a much more effective and easier manner.
• The rest parameter allows us to treat an indefinite amount of values as the values of an array, which means the values which are passed using the rest parameter syntax are treated as array elements or array values.
• Using rest parameters in our code makes our code more readable and cleaner.

Syntax:

function function_name (...arguments) {
    // Code logic.........
}

By using the above-illustrated syntax, we may easily pass on several arguments in one function which further helps any user to make the code more readable and cleaner.

let us look at some examples to see how we could effectively use this rest operator.

Example 1: In this example, we will use a simple way of writing a function further adding rest parameters and passing on some arguments inside a function as parameters while calling the function itself.

Javascript

function display(first_argument, ...other_arguments) {
    console.log(first_argument);
    console.log(other_arguments);
}

display(1, 2, 3, 4, 5, 6);

Output: The output of the above snippet is as follows:

1
[ 2, 3, 4, 5, 6 ]

Example 2: In this example, we will calculate the sum of all the numbers which are passed by the user inside the function as parameters while calling.

Javascript

function sum(...numbers) {
    let sum = 0;
    for (let element of numbers) {
        sum += element;
    }
    console.log(sum);
}

sum(1, 5, 5, 3, 6);
sum(1, 2, 3, 4);
sum(0, 1, 2);

Output: The output of the above code snippet is shown below:

20
10
3

Example 3: In this example, we will sort all the arguments which are provided by the user at the time of the function call.

Javascript

function sortNumbers(...numbers) {
    let sortedResult = numbers.sort();
    return sortedResult;
}

console.log(sortNumbers(1, 2, 3, 4, 0));
console.log(sortNumbers(5, 2, 9, 7));

Output: The output of the above code snippet is shown below:

[ 0, 1, 2, 3, 4 ]
[ 2, 5, 7, 9 ]