JavaScript Basics

JavaScript Advanced

JavaScript Arrays

JavaScript Functions

JavaScript Objects

JavaScript DOM

JavaScript String

How to use the rest operator in JavaScript?

ES6 introduced two new operators, spread and rest operators. The rest operator is used to create a function that accepts a variable number of arguments in JavaScript.

Note: Rest operator is also known as Rest parameter.

Before you learn how to use the rest operator, it is necessary for you to understand the problem faced by the developers and why there is a need for the rest operator.

Suppose you have a function sum() that calculates the sum of two numbers.

function sum(arg1, arg2){
   return arg1 + arg2;
}

You invoke the sum() function and pass two arguments to it, and it returns their addition.

sum(1, 2); //3

Let say you want to calculate the sum of three numbers using the same sum() function. In order to do this, you have to modify the sum() function and specify the third parameter.

function sum(arg1, arg2, arg3){
   return arg1+arg2+arg3;
}

If you call sum(1, 2, 3), you will get 6, but when you call sum(1, 2) you will get NaN. So, this way of coding is not a feasible and scalable solution. The better way of creating a function that accepts variable number of arguments are:

Using the arguments object .

Using the rest parameter.

In this tutorial, you will learn how to use rest parameters in JavaScript. But, first, let's see the syntax for the rest parameters.

function functionName(...parameterName){
   //function body
}

Here, parameterName is a rest parameter. It is preceded by three dots (...).

There are essential points that you must remember regarding rest parameters:

Apart from other parameters, a function can have only one rest parameter.
The rest parameter is an array. You can use loops such as forEach(), for/of, and others to iterate through it.

Let's modify the sum() function and use the rest parameter.

function sum(...args){
   let total = 0;
   for(let number of args){
      total += number;
   }
   return total;
}
console.log(sum(1, 2)); //will give 3
console.log(sum(1, 2, 3)); //will give 6

Rest operator converts the arguments to an array so that you can iterate through them easily. This is evident from the following example.

function sum(...args){
   console.log(args);
}
sum(1, 2); //[1, 2]
sum(4, 5, 6); //[4, 5, 6]

You can see that the arguments 1 and 2 are transformed into an array. Similarly, 4, 5 and 6 are also transformed into the array.

The rest parameter must be the last parameter of the function. If you don't follow this, you will get SyntaxError.

The following code will give SyntaxError: Rest parameter must be last formal parameter.

function display(arg1, ...args, arg3){
   //function body
}

The correct way of writing the code is

function display(arg1, arg2, ...args){
   console.log(arg1);
   console.log(arg2);
   console.log(args);
}
display(2, 3, 4, 5, 6);

Output

2
3
[4, 5, 6]

4, 5 and 6 has become array elements because of the rest parameter args.