CODEWITHSUNDEEP
javascriptcomparisonconditional-statements
Chris Cirefice
Chris Cirefice

Reputation: 5795

Javascript Value Comparison Explanation

What is the difference between these two conditional statements in Javascript?

function comparisonTest() {
  var value = "A value";
  var compare1 = 5;
  var compare2 = "String";
  var compare3 = false;

  if (value == compare1 || value == compare2 || value == compare3) console.write("True");
  else console.write("False");
}

This works as it should - it returns false because the values don't match. However, when I change the conditional to the following...

function comparisonTest() {
  var value = "A value";
  var compare1 = 5;
  var compare2 = "String";
  var compare3 = false;

  if (value == compare1 || compare2 || compare3) console.write("True");
  else console.write("False");
}

it always returns True. I thought that maybe there would be a shorter way of writing that condition for multiple comparisons (although a loop would function just fine), but this is clearly not a way to approach this.

What is going on behind-the-scenes or, rather, how is it being interpreted so that in the second case it always returns true? None of the values I declared are 1 or true, so that's definitely not the problem.

Upvotes: 1

Views: 85

Answers (3)

Jeremy J Starcher
Jeremy J Starcher

Reputation: 23863

Here is another option:

function comparisonTest() {
  var value = "A value";

  var answers = [5, "String", false];

  /* IE may requires shim found here:
     https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
  */
  if (answers.indexOf(value) === -1) {
    // False
  } else {
    // True
  }
}

Upvotes: 2

jfriend00
jfriend00

Reputation: 707238

That's because this:

if (value == compare1 || compare2 || compare3)

is the same as this:

if ((value == compare1) || compare2 || compare3)

And, you will see that compare2is a truthy value which satisfies the || operator. See this MDN article on operator precedence for why the == gets evaluated first which makes your first code block work, but makes your second one evaluate like I've shown.

If you want to compare all of them to value, you have to write it out the longhand way like you did in your first code block where you compare each one separately to value.

You may also want to look into using === more often so then you don't have to worry about possible type conversions making things equal that you never intended to be equal. I have a guideline in my own coding to always used === and !== unless there's an explicit reason to want a type conversion. I believe this saves some accidental bugs. See here for more info.

Upvotes: 2

Mark Meyer
Mark Meyer

Reputation: 3723

Unfortunately I do not believe there is a short way to write conditionals in JavaScript.

The reason the second example returns true is because when you evaluate compare2 this is a truthy value in JavaScript.

I recommend this post about truthy and falsey values in JavaScript

As an aside you may want to look into the difference between == and === in JavaScript

Upvotes: 1

Related Questions