DEV Community

Muzammil Ahmed Khan
Muzammil Ahmed Khan

Posted on

How To: calculate sum of unknown no of arguments in function Manually - With using Rest operator,Reduce() method in javascript.

1 - Manual way:

//every function in javascript have special object called "arguments". 
//if you console.log(arguments) inside function:

function sum(a,b)
{
  console.log(arguments);
}
sum(1,2);

you will get this definition:

Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]
0: 1
1: 2
callee: ƒ sum(a,b)
length: 2
Symbol(Symbol.iterator): ƒ values()
__proto__: Object


[Arguments] {'0':1, '1':2} 
it reutrn object "Arguments" with properties as index number and 
aurgements we pass in function as values eg: '0' : 1

this object also have other properties like length which is 2 
(this is object not an array so length is not count with 0; )

property callee: which has definition of function sum()
but for our exercise "sum of unknown number of aurgements pass in function" we only interested in 
aurgments object properties and values which are passed in function as aurgements '0' : 1, '1' : 2.
*/

function sum()
{
  // create variable totalSum to sum the all arguments pass in function
  let totalSum = 0;

  // iterate arguments object with for loop so we can get its properties and values.
  // as we know that we can only use for(in) loop for objects to get values with 
  // loop eg:for(let values in object) and
  // for arrays we use for(of) loop eg: for(let keys of array) to iterate through 
  // an array.
  // but here we are using "for" loop with "of" because this object also have 
  // iterator (property)
  // Symbol(Symbol.iterator): ƒ values() which means we can iterate this object 
  // as array like this:
  // for(values of arguments )
  for(let values of arguments)
  {
    // add values of objects passed as arguments in function (1,2,3,4,5)
   // on each iteration to variable totalSum
    totalSum += values;
  }
  // return totalSum
  return totalSum;
}
console.log(sum(1,2,3,4,5));

2- with Rest Operator ...args[]:

/* 
so in above example we sum number of arguments pass in function 
by loop through "Arguments" object in function.
Now lets do it with passing special arguments...args in function.
which is also called rest operator in javascript. 
We can use it like this :
*/
function sum(...args)
{
  //if you console.log it
  console.log(args);
}
console.log(sum(1,2,3,4,5));
/*
 Now on console we can see that it return passing arguments as array on console.
(5) [1, 2, 3, 4, 5]
0: 1
1: 2
2: 3
3: 4
4: 5
length: 5
__proto__: Array(0)

Tip: Thing to Remember when pass rest operator ...args in function 
always use three dots ... before it like this function sum(...args)
other wise javascript engine consider as single argument pass as "args" function sum(args)

Now we know that ...args is array so we can use javascript reduce() method to sum
all the values pass in it: 
*/
function sum(...args)
{
  // sum all the values pass in function argument by reduce() method
  // where totalSum is a variable whose value is remembered across each 
  //iteration throughout the array and ultimately becomes the final, single resulting value.
  // and currentValue work as a value in array with each iteration.
  return args.reduce((totalSum,currentValue) => totalSum + currentValue );
}
console.log(sum(1,2,3,4,5));
/*Why we called it rest operator ? because we can also pass any other arguments before
...args argument not after it that's why its called Rest operator.

lets assume an employee and we want to add his salray + partTime + multipleBonuses he get.
so we can pass in arguments values of salary, partTime, multipleBonuses
so actually we enclose all bonuses in ...salaryBonuses as array 
get sum of them and then add salary , partTime to that.
*/

function sum(salary, partTime, ...salaryBonuses)
{
  let total = salaryBonuses.reduce((a,b) => a + b);
  total = (total + salary + partTime)
  return total;
}
console.log(sum(10000,2000,3000,1000,4000));

/* 

if you pass ...args before any arguments you get error:

SyntaxError: Rest parameter must be last formal parameter
function sum(salary, partTime, ...salaryBonuses,taxDeduction)
{
  let total = salaryBonuses.reduce((a,b) => a + b);
  total = (total + salary + partTime) - taxDeduction;
  return total;
}

console.log(sum(10000,2000,3000,1000,4000));

*/

I hope you like this article , take care see you soon.

Top comments (0)