JavaScript, Conditional Statements (&& and ||), Why Does This Work This Way?

Hey there, fresh coder, no experience before this course. I was doing a final review from the conditional statements course when I started playing around with conditionals to make sure I learnt them. This lesson:

https://www.codecademy.com/courses/introduction-to-javascript/lessons/control-flow/exercises/review-control-flow

Anyways, I hit a funny quirk with my code. Here it is…

let magic = 'poison cloud';

if (magic === 'frostbolt' || 'fireball' || 'arcane blast') {

  console.log('Deals thermal damage');

} else if (magic === 'earth shock') {

  console.log('Deals blunt damage');

} else if (magic === 'poison cloud') {

  console.log('Deals biological damage');

} else {

  console.log('Not a valid spell!');

}

The idea is by changing the ‘magic’ variable, I get a printout based on what its value is. I thought I’d consolidate the code by using the OR statement “||” for spells that deal the same kind of damage, IE if the magic variable is set to frostbolt OR fireball OR arcane blast, it deals thermal damage. Currently, the input is set to ‘poison cloud’, and so it should print out ‘deals biological damage’, but instead it prints out ‘deals thermal damage’ as if it was a frostbolt, fireball, or arcane blast, despite not being any of them!

Baffled, I played with the script a bit, and I discovered it works when I switch “||” to “&&”. By turning the second line to “if (magic === frostbolt && fireball && arcane blast);” , it suddenly works, and inputting ‘poison cloud’ correctly prints the right message! Not only that, but when I input ‘frostbolt’, it correctly reverts back to thermal damage as it’s supposed to, despite ‘frostbolt’ not being equal to ‘fireball AND frostbolt AND arcane blast’.

An && statement should only work if all parts of it are ‘true’, so why does it return ‘true’ when only one of its parts matches? And why is an || statement returning as ‘true’ when none of its parts match?

It worked when I used “&&” instead of “||”, but I have no idea why, and I’d like some insight into why it works this way, or else I feel like I might get issues further down the road. Again, fresh coder, near-zero experience, and even some of the vocab is real new to me, so please be gentle.

Do you see anything wrong with the comparison in the if statement?

Also, don’t forget to format your code: [How to] Format code in posts

Ok, so this is based on things being ‘truthy’ or ‘falsey’. Meaning they evaluate to true or false.

If you say “if A === B || C”, then what you’re telling the computer is “If A is equal to B, or if C, then the condition passes.”
The second part of that is literally “if C”. If C has a value, the statement thinks it’s true. It’s ‘truthy’.

1 Like

AHA, and because ‘poison cloud’ is not a falsy statement like 0, null, or NaN, it counts as being ‘truthy’! That still doesn’t make a terrible lot of sense to me, but I’ll acknowledge that I should not assume || literally means the word OR, and that it’s checking to see if the variable is truthy, not if it matches exactly.

You know I practically lost sleep over this one? I did this section right before I went to bed last night when my google-fu wouldn’t find an answer. But thank you, I’ll keep this in mind when using conditionals in the future, thanks a bunch.

This is not right. It tells the reader you expect magic to be one of the three values on the right hand side. That is not the case in JavaScript. Well the variable may have one of those values but this expression will only suss that out in one of three cases.

if (x === a || x === b || x === c)

Three independent expressions.

Huh, that makes sense, it’s easier to mentally understand that way.

So if I’m understanding this right, in my original statement, I was asking “is magic a frostbolt, or truthy, or truthy”, whereas in your format (syntax?), it’s worded as “is magic a frostbolt, or is magic a fireball, or is magic an arcane blast?”

Now I know why it worked the way it did, and how to correctly adjust it. Thanks again, this definitely would have caused problems later down the road, and it opens up some possibilities I was afraid I was not going to be able to try out.

1 Like