DEV Community: Muzammil Ahmed Khan

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

Muzammil Ahmed Khan — Tue, 08 Oct 2019 10:45:56 +0000

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.

Explaining How to use array.includes() and array.push() method by Code Exercise "upload only allowed file types".

Muzammil Ahmed Khan — Mon, 07 Oct 2019 08:33:55 +0000

Explaining Nested Loops for Beginners - JavaScript.

Muzammil Ahmed Khan — Sun, 06 Oct 2019 11:56:27 +0000

// Explaining Nested Loops in Javascript
function nestedLoop(limit)   
{
  // OUTER LOOP:
  for(let outerLoop = 1; outerLoop <= limit; outerLoop++)
  {
  /* OUTER LOOP Definition: 
   outerLoop initial value = 1;(loop start from 1)
   Condition: outerLoop <= limit , Loop will continue until value of 
   outer loop is less than equal to limit provided by user in Function Argument.

   outerLoop++:if condition is true outerLoop will increment by 1 with each Iteration.

   Iteration (OUTER LOOP): 
    check condition in outer loop if outerLoop(value = 1) <= limit (value = 5)
    its true as 1 is less than 5 OUTER LOOP continues
    print (OuterLoop 1) on console, Enter in INNER LOOP 

  Iteration(OUTER LOOP): increment the value of outerLoop by 1 (outerLoop = 2) now.
  check condition if outerLoop <= limit (2 less than equal to 5) 
  condition is  true so print (OuterLoop 2) on console and Continues to Inner Loop.

*/
  console.log("OuterLoop "+outerLoop);

  // INNER LOOP:
  for(let innerLoop = 1; innerLoop <= outerLoop; innerLoop++)
  {
   /* 
      Definition of INNER LOOP:
      loop start from value 1, loop will continue until value of innerLoop is less 
      than equal to outerLoop, if condition true value of innerLoop incremented by 1
      with each Iteration

    ========================  INSIDE OF OUTER LOOP ITERATION 1 ========================
     Iteration1(INNER LOOP) 
      check condition if innerLoop value (which is 1) is less than equal to 
      outerLoop value (which is also 1) so condition is true as innerLoop is equal to 
      outerLoop (1 === 1) so print (InnerLoop 1) in second line of console
      increment the value of innerLoop by 1 (value of innerLoop is now 2)
     INNER LOOP continues to iteration 2 ....

     Iteration(INNER LOOP) 
      check condition (if innerLoop(value = 2) less than euqal to  outerLoop(value = 1))
      condition is false as 2 is greater than 1 so INNER LOOP ENDS  
      and goes back to OUTER LOOP 2nd Iteration.
      SEE ABOVE 2ND ITERATION OF OUTER LOOP
    =======================END OF 1ST ITERATION OF OUTER LOOP ===========================



    ========================  INSIDE OF OUTER LOOP ITERATION 2 ========================

      TIP FOR INNER LOOP :so if you remember that we leave our innerLoop value =2 
      when we end the INNER LOOP  in 1st Iteration of OUTER LOOP but thats the key point in 
      INNER LOOP that the value it ends in 1st Iteration of OUTER LOOP it will not continue 
      from that value infact it re-start its iteration from 1 and start from initial value =1

      in our last iteration of OUTER LOOP value of innerLoop is 2 (2nd Iteration of INNER LOOP) 
      So now INNER LOOP is start inside in 2nd Iteration of OUTER LOOP
      INNER LOOP again restart form 1st Iteration and  again start from value 1 

     2nd ITERATION OF OUTER LOOP)
       INNER LOOP (1st Iteration) in condition it checked if innerLoop(value=1) <= outerLoop(value=2) 
       as 1 is less 2 which is true so print (InnerLoop 1) on console
       condition is true so INNER LOOP continues and increament value of innerLoop by 1 (innerLoop value is 2 now)
       and goes to 2nd Iteration of INNER LOOP.

      2nd ITERATION OF OUTER LOOP) 
      INNER LOOP (2nd Iteration) again check condtion which is true as value of innerLoop(2) is equal to outerLoop(2) 
      Loop continues and increment value of innerLoop by 1 so go into 3rd Iteration of INNER LOOP 
      check condition which is false because value of innerLoop is now 3 and greater than outerLoop value = 2. 
      inner loop ends and continue to 3rd ITERATION OF OUTER LOOP. 
      And this process is continues until the condition of OUTER LOOP becomes false which is (outerLoop less than equal to limit).

      Things to Remember:
      1- in each Iteration of OUTER LOOP inner loop continue from its initial value
      and repeat its all iterations until its condition become false.

     2- use nested loops when you have to worked on multi-dimension arrays or calculating the 
     mathematical calculation which involve multiple values and each value is increment in
     next cycle.

    3- try to separate your inner loop in another function. if we take above example and separate 
    both loops in two function it would be like this:

    function outer(limit)
    {
      for(let outerLoop =1; outerLoop <= limit; outerLoop++)
      {
        //OUTERLOOP
        console.log("OuterLoop "+ outerLoop);
        //INNERLOOP
        console.log(inner(outerLoop));
      }
    }

    function inner(outerLoop)
    {
       for(let innerLoop =1; innerLoop<=outerLoop; innerLoop++)
       {
         console.log("InnerLoop "+innerLoop);
       }
    }
  As you see that now code is less complex and easy to understand now.
  I hope you like this tutorial take care see yo soon.


     */   
    console.log("InnerLoop "+ innerLoop);
    }
 }
}
console.log(nestedLoop(5));

How To:Getting max value in Array in JavaScript without using reduce()

Muzammil Ahmed Khan — Sat, 05 Oct 2019 09:51:25 +0000

How to change fontawesome icon bg color

Muzammil Ahmed Khan — Fri, 04 Oct 2019 22:42:46 +0000

ok here is simple trick to change font awesome icon bg color let say we have youtube icon which looks like this as default:

ok but i want to change it to red like on you tube so the simple trick is that you add inline style in i element like this style="color:#FF0000;" and that's it it will change icon back-ground color to red like on you tube.