JavaScript If-else range check in opposite not working

Question

Can anyone please explain the logic behind this code?

function getGrade(score) {
    let grade;
    if (20 < score <= 30) {
      grade = "A";
    } else if (10 < score <= 20) {
      grade = "B";
    } else if (0 < score <= 10) {
      grade = "C";
    }
    return grade;
  }

  console.log(getGrade(15));    //'A'
  console.log(getGrade(4));     //'A'
  console.log(getGrade(20));    //'A'

It is working fine with using && operator in if-else or using opposite as: 30>= score > 25. Thanks in Advance.

I think it's because in JS `x < y < z` is not correct. It should be `x < y && y < z` — evolutionxbox, Dec 26 '20 at 13:50
`20 < score` is either `true` or `false`. When compared to a number, `true` is converted to `1` and `false` is converted to `0` and both `0 <= 30` and `1 <= 30` are always true, hence the comparison is always true. — Ivar, Dec 26 '20 at 13:52
Does this answer your question? [Check if a value is within a range of numbers](https://stackoverflow.com/questions/6454198/check-if-a-value-is-within-a-range-of-numbers) — Ivar, Dec 26 '20 at 13:59
but if I go with your logic, and use ```30> score >= 25```, then it will be ```30> score```, either ***true*** or ***false***. i.e. ```1``` or ```0``` and ```0 >= 25``` and ```1 >= 25``` will always be ```false```. Don't you think? @Ivar — Mitanshu, Dec 26 '20 at 14:08
@MitanshuKumar Seems like that is the case: https://jsfiddle.net/p7hwyn8x/ — Ivar, Dec 26 '20 at 14:11
Thank you @Ivar. You are right. If we use ```x < y < z```, it will always be true, and if ```x > y > z``` it will always be false. _(!) x,y,z != 0 or 1_. Conclusively, we should always use ```x < y && y < z``` in JS. — Mitanshu, Dec 26 '20 at 14:44
[Duplicate](https://google.com/search?q=site%3Astackoverflow.com+js+20+<+score+<%3D+30+not+working) of [Why does (0 < 5 < 3) return true?](https://stackoverflow.com/q/4089284/4642212). — Sebastian Simon, Dec 26 '20 at 17:26

Olov · Accepted Answer · 2020-12-26T14:21:46.537

The expression 20 < score <= 30 evaluated to true all the time because of how multiple operators work when using them in Javascript, see more here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

What is happening is that first is 20 < score evaluated, and this is either true (1) or false (0). This value is then compared if it is less than or equal to 30. As the value is always either 1 or 0, this is always less than 30, so the whole expression as a whole is always true.

Try these lines yourself to see how it works. :)

score = 10;
b = 20 < score; // false
c = b <= 30; // always outputs true

// Also try
d = true <= 30; // true
e = false <= 30; // true

What you should do here, is as you write, to use &&-operators instead:

if (20 < score && score <= 30) {
    grade = "A";
}

Thank you @Olov. I was bit confused, as in other languages ```xy>z``` works fine. In JS, we should use ```&&``` operator in-between. — Mitanshu, Dec 26 '20 at 14:47

JavaScript If-else range check in opposite not working

1 Answers1