why I get Different result in switch statements

Question

I am learning JavaScript and currently I build simple tip calculator using function and switch statement. Basically, tip 20% of the bill when the bill is less than $50, 15% when the bill is between $50 and $200, and 10% if the bill is > $200. The sample input/argument:

simpleTipCalculator(124)
simpleTipCalculator(48)
simpleTipCalculator(268)

if you calculate manually, the result(expected result):

18.599999999999998
9.600000000000001
26.8

Here is my code so far:

function simpleTipCalculator(bill){
    let tip = 0
    switch(bill){
        case bill > 0 && bill < 50:
            tip = bill * 0.2
            break;
        case bill >= 50 && bill <= 200:
            tip = bill * .15
            break;
        default:
            tip = bill * .1

    }
    console.log(tip)
}

and the result of this function:

12.4
4.800000000000001
26.8

I feel confused about this and then I change my code to this:

function simpleTipCalculator(bill){
        let tip = 0
        switch(true){
            case bill > 0 && bill < 50:
                tip = bill * 0.2
                break;
            case bill >= 50 && bill <= 200:
                tip = bill * .15
                break;
            default:
                tip = bill * .1

        }
        console.log(tip)
    }

The result is what I expected.

18.599999999999998
9.600000000000001
26.8

My question is how did this happen? please explain me about that because I don't know what to look for on Google about this

Answer 1

When you do

switch(bill){

a case will be fulfilled if the expression that follows it is === to the value of bill. For example, if bill is 124, then switch(bill) would require

case: 124:
    tip = bill * .15 // because 124 <= 200

for your program to work as expected. Your code is producing unexpected results because all the cases fail, and it falls through to the default.

The switch(true) works because when you have cases of

case bill > 0 && bill < 50:

this will effectively evaluate to

case true
// block below will run, because `true` is `===` to the expression that was switched against

or

case false:
// block below will not run, because `false` is `!==` to the expression that was switched against

and run the case block accordingly.

switch is not the right tool for the job, IMO - it's confusing and verbose. (It's never the right tool for any programming task in Javascript, I think.) I'd use if/else instead:

const getTip = (bill) => {
  if (bill > 0 && bill < 50) {
    return bill * 0.2;
  } else if (bill >= 50 && bill <= 200) {
    return bill * 0.15;
  } else {
    return bill * 0.1;
  }
};

function simpleTipCalculator(bill) {
  console.log(getTip(bill));
}

simpleTipCalculator(124)
simpleTipCalculator(48)
simpleTipCalculator(268)

Answer 2

switch case does not work the way you are using it.

switch(test){
    case a:
        break;
    case b:
        break;
    case c:
        break;
}

compares the value of test to the value of a, then b and so on

so in your first code example it compares 124 with the value/output of (bill > 0 && bill < 50) which is false

so you are comparing integers with booleans.
To make ranges work you have to do it like in your second example.

Stackoverflow post I found: https://stackoverflow.com/a/5619997/7584725

Answer 3

This is because you are comparing switch(bill) where bill is number to boolean case: ... where case is if statement. This will always lead to default since any comparison would fail. You need to change switch as switch(!!bill) or simply switch(true)

function simpleTipCalculator(bill){
    let tip = 0
    switch(!!bill) {
        case (bill > 0 && bill < 50):
            tip = bill * 0.2
            break;
        case (bill >= 50 && bill <= 200):
            tip = bill * .15
            break;
        default:
            console.log('default');
            tip = bill * .1
    }
    return tip;
}

console.log(simpleTipCalculator(124));