The Rest parameter and spread operator made simple. Part 1

So we've been tasked to create a program that adds numbers passed to it. That is easy, we just create a function with a few parameters that we use to calculate the sum of numbers.

function addNums(num1, num2) {
   return num1 + num2
}
let ans = addNums(4, 5)
console.log(ans) // 9

At this point, everything is working fine. But what if we want our function to return the sum of any number of numbers given to it? In JavaScript, you won't get any errors when you call a function with any number of arguments. Unfortunately, it will ignore extra arguments passed to it

function addNums(num1, num2) {
   return num1 + num2
}
// add more arguments
console.log(addNums(4, 5, 4, 7, 8)) // 9

The function above will take in the first two arguments and ignore the rest.

Is there a way we can improve our addNums function so it can return the sum of all arguments passed to it even those we never defined as parameters? Yes. We can utilize the rest parameter.

Using the rest parameter

We have already noticed that when we call our addNums function with extra arguments, no error occurs but the extra arguments are ignored. So let us utilize the rest parameter syntax so we can utilize the extra arguments.

The syntax for the rest parameter is ... followed by the name of the array that will hold the arguments.

function addNums(...restOfArg) {
   // your code here
}

You may wonder what the rest parameter is doing, so let me help you. The rest parameter captures all incoming arguments into an array. As shown below.

function addNums(...restOfArg) {
   // your code here
    console.log(restOfArg)
}
addNums("Pat", 1, "Jan", 1992) // [ 'Pat', 1, 'Jan', 1992 ]

Having learned what the rest parameter is, and what it does to the incoming arguments, it is time to use it.

Back to our addNums function. We can now improve it so it accepts all incoming arguments and return their sum.

function addNums(...nums) {
  let total = 0
   for(let num of nums){
     total += num
   }
  return total
}
// add more arguments
console.log(addNums(4, 5, 4, 7, 8)) // 28

We have created a variable total and assigned it a value of 0 to track the total of numbers coming in as arguments. We then iterate through the elements of the nums array and increment the total variable with each element of the nums array. finally returning the total.

At the definition of the function, one can choose to let the first two or three arguments be variables and then collect the rest into an array using the rest parameter syntax as shown below.

function person(first, last, ...children) {
  const fullName = first + ' ' + last 
  console.log("Your name: " + fullName)
  console.log("Names of Children")
  console.log(children[0])
  console.log(children[1])
  console.log("Number of children")
  const numberOfChildren = children.length
  console.log(numberOfChildren)
}

person("Seremba", "Patrick", "Josiah", "Jeremiah")
// outputs
/* 
Your name: Seremba Patrick
Names of Children
Josiah
Jeremiah
Number of children
2
*/

It should be noted that while using the rest operator with other variables when defining a function, the rest operator must be the last parameter. Placing it anywhere in the middle will throw an error.

Conclusion

The first part of this topic has been about the rest operator. we have discovered the syntax for the rest parameter, we have seen how to utilize the rest parameter, and also we have seen that it can be used with other parameters when defining a function but it should be the last parameter.