Returning a value from switch statement

Question

I'm new to web development (JS) and I know there are many topics matching the title of mine, but no similar questions were answered, or maybe because I'm newbie, couldn't find.

In the code below I wanted my function and switch statements, to retrieve values from the arrays (bills) and in order to calculate new value, which to be assigned into a new non-existing place into the array tips. As a final result I want the function to return tips array with the value, depending on the case.

I know another way for solving this, anyway I was wondering whats wrong here, because that idea for solving it first came to my mind, and I thought it would work.

Here is my code:

var tips = [];
var bills = [124, 48, 264];

function tipCalc(bills, tips){
 switch(bills){
    case bills < 50:
      tips[0] = bills[1] * 0.2;
      break;

    case bills > 50:
      tips[1] = bills[0] * 0.5;
      break;

    default:
      console.log('no tips left.');
  }
  return tips;
}

tips = tipCalc(bills[0]);
console.log(tips);

enter code here

Answer 1

Here's a verbose way of doing what I think you want to do. (add up the tips total)

// create a blank tips array which we'll add to later
var tips = [];
// our bills array
var bills = [124, 48, 264];
// create a function that will calculate tips based on the bill totals
function calculateTips() {
  // create a counter that we will use to determine when we've reached the end of the loop
  var forEachCounter = 0;
  // for each will loop through each item in the bills array
  bills.forEach(function(amount) {
    //this increases the counter by 1 on each loop
    forEachCounter++;
    switch(true) {
      case (amount <= 50):
        // .push appends to the array
        tips.push(amount * 0.2);
        break;
      case (amount > 50):
        // amount is the value of the bill for this iteration * 0.5
        tips.push(amount * 0.5);
        break;
    }
    // if end of array has been reached
    // bills.length = the total amount of array items in bills arrat
    if (forEachCounter === bills.length) {
      // create a totalTips variable to add to
      var totalTips = 0;
      // create another counter to detect when end is reached
      var forEachCounter2 = 0;
      // loop through the tips array
      tips.forEach(function(tipamount) {
        // add 1 to counter on each loop
        forEachCounter2++;
        // add to totalTips
        // can also do totalTips = totalTips + tipamount;
        totalTips += tipamount;
        // when end of tip array is reached..
        if (forEachCounter2 === tips.length) {
          //alert(totalTips);
          // output it to where you need it
          document.getElementsByTagName('body')[0].innerHTML = totalTips;
        }
      })
    }
  })
}
// call it when you need it
calculateTips();

note

If you're working with a lot of tips (like an entire national restaurant chain) you may want to consider using if/else instead of switch because switch is demonstrated to be slower with ranges

fiddle with it here

https://jsfiddle.net/Hastig/p1kfgreq/

Answer 2

well, this is not good approach, but if it is required for you to use Switch you can try like this without bills array at all:

<script type="text/javascript">
    var tips = [];



    function tipCalc(bill) {
        switch (true) {
            case (bill < 50):
                tips.push(bill * 0.2);
                break;

            case (bill > 50):

                tips.push(bill * 0.5);
                break;

            default:
                console.log('no tips left.');
        }
        return tips;
    }

    tipCalc(10);
    for (let index = 0; index < tips.length; index++) {
        console.log(tips[index]);

    }



</script> 

Or in case you need to compare bills array and depends to the value insert to tips array i would make it like :

<script type="text/javascript">

    var tips = [];
    var bills = [124, 48, 264];

    function tipCalc(bills) {
     for (let index = 0; index < bills.length; index++) {

         if (bills[index] <=50) {
            tips.push(bills[index] * 0.2);
         }
         else if (bills[index] >= 50) {
            tips.push(bills[index] * 0.5);
         }
         else 
             console.log("no tips left.");  
     }
    }

    tipCalc(bills);
    for (let index = 0; index < tips.length; index++) {
        console.log(tips[index]);

    }

</script>

Answer 3

Let's break this code down a bit and talk about what it's doing

var tips = [];
var bills = [124, 48, 264];

This part is declaring two variables in the global scope, which will both be accessible by any functions for both reading and writing (important - Google JS closures).

function tipCalc(bills, tips){
 switch(bills){

You have now started a function which calls a switch to evaluate the value of bills. Because you are passing in bills[0], it will be evaluating bills[0] (124). It also accepts a second parameter called tips, which is undefined because no second argument is passed in when the function is called.

case bills < 50:
  tips[0] = bills[1] * 0.2;
  break;

This part is broken. If it was changed to an if statement, it would evaluate to false.

case bills > 50:
  tips[1] = bills[0] * 0.5;
  break;

Also broken. If changed to if statement, it would evaluate to true and be executed, but it would be performing an operation on undefined. If you didn't h have a second param also named tips, then you would be setting the global tips to 62.

    default:
      console.log('no tips left.');
  }

This is the part that should currently be executed because it is the only one that can be true with the other two cases being structured incorrectly.

  return tips;
}

Will return undefined because tips (within the scope of the function itself) began as undefined and has not been altered.

  tips = tipCalc(bills[0]);
  console.log(tips);
  enter code here

Breaks the whole program, should be a comment with // at the beginning.