REST parameter in JavaScript

What is Rest?

When your upcoming tech-enthusiast ten years old pops up from nowhere and ask mum can you explain the concept of REST in JavaScript for me? How will you respond if not using what is relatable to a young champ.

Let us take a look at the concept of Rest together:

Imagine yourself going to the market to get groceries and you suddenly remembered you need a list of food grain items like rice, beans, corn and millet. On getting home you unpacked these items into sections in your kitchen cabinet.

The kitchen cabinet which does the work of keeping items safe will be representing your function, it is capable of having various sections which we can call parameters. For example, if your kitchen cabinet has just two sections, unpacking the items we got from the market to fit into the two sections will be as follow:

Section 1 / Parameter 1 = Groceries.

Section 2 / Parameter 2 = All the remaining individual food grain items arranged together in a straight line like an array.

Note: Section 2 in the kitchen cabinet accommodated all the other items bought from the market aside groceries, this is the representation of the Rest parameter. It is also declared as the last section in the kitchen cabinet.

Defining REST Professionally

Rest is used to represent variadic functions (functions that can collect indefinite number of argument) in JavaScript. It allows a function to collect the remaining argument into an array instead of using an argument object.

Rest is always declared as the last parameter in a function and it is represented with three dots (...), just like spread operators in JavaScript.

Example1:

function getNames (...names)

{
 console.log(`Available names gotten are ${names}`);
}

getNames("Tola" , "Seun", "Seye");
//ouput will be: Available names gotten are [Tola, Seun, Seye].

In example one above we see rest parameter declared as ...names in the function getNames. when arguments are passed into the function the rest parameters collect all and displays it as an array.

Example 2:

Using the illustration given to my ten-year-old above let's express the scenario as a JavaScript code.

const kitchenCabinet = (groceries, ...foodGrains) =>{
 for(let foodGrain of foodGrains)
   {
     console.log(`${foodGrain} is a food grain item I bought from the market`);
   }
   //To determine the number of food grain item bought 
    console.log(`The total number of food grain item bought is ${foodGrains.lenght}`);
  //To print out some food grain items arranged indexly in an array
    console.log(foodGrains[0]);
    console.log(foodGrains[3]);
};

// Calling our function kitchenCabinet and passing arguments
kitchenCabinet("Cornflakes","Rice", "Beans", "Corn","Millet");

In example 2 above the output of the code will be as follows:

• Rice is a food grain item I bought from the market

• Beans is a food grain item I bought from the market.

• Corn is a food grain item I bought from the market.

• Millet is a food grain item I bought from the market

• The total number of food grain item bought is 5.

• Rice

• Millet

Conclusion

Rest helps us to easily handle various inputs as parameters in a function. It also allows us to represent an indefinite number of arguments as an array.

We can also say Rest parameters in JavaScript gives us rest when working with functions that requires various argument passing through them as parameters.