Coalescing operator rules in JavaScript

Coalescing rules in JavaScript can be confusing especially when you first learn the language. The first case we are going to look at is the plus operator.

  1. number + number = number
  2. number + string = string
  3. string + string = string
  4. bool + number = number
  5. bool + bool = number
  6. bool + string = string

Rule 1 is not surprising 1+2 = 3.  That’s what we all expect.  Its the other rules that may surprise people.  Rule 2 means that 3 + ‘hello’ = ‘3hello’.  The reason for this is that because the right hand operand is a string the number 3 gets coalesced into a string ‘3’ and then the plus operator acts as a concatenation.  Rule 2 also means that ‘1’ + 2 = ’12’ for the same reason the fact that ‘1’ could be converted to a number does not come into play.  Rule 3 will be obvious to people who have used other programming languages ‘hello’ + ‘ world’ = ‘hello world’.  Because both operands are strings + simply acts as a concat operator.  Rule 4 will probably catch a lot of people out.  When one operand is a bool and the other is a number the bool is converted to a number with false being 0 and true being 1.  So false + 2 = 2 and true + 2 = 3.  Rule 5 is a logical extension of rule 4.  When both operands are bool then they are both treated as numbers using the same values as before so true + false = 1.  Rule 6 is slightly odd as now bools behave totally differently.  When a bool is operated on with a string the bool is converted to a string instead of a number as in rules 5 and 6.  So true + ‘world’ = ‘trueworld’.  Think of it like calling ToString() in .net on the boolean.

Now that we have established some of the rules of how types behave when they are combined with other types we can see why it is important to know the difference between == and === in JavaScript. Let’s start with ===. === says look at both operands if the types are different then the expression is false, if the types are the same then compare them.  This is logically what most people would expect so:

  • 2 === ‘hello’ = false
  • 3 === true = false
  • 3 === false = false
  • ‘hello’ === ‘world’ = false
  • ‘3’ === 3 = false
  • 1 === true = false

Notice the last 2 of the six cases above.  We are comparing the string 3 to the number 3.  This is false because one side is a string and the other is a number so the expression is false regardless of the values.  1 === true = false because again both types are different.

This is where the important difference comes in with the == operator.  The == operator says first change both coalesce both of the types then compare.  Here are the expressions again using == operator:

  • 2 == ‘hello’ = false
  • 3 == true = false
  • 3 == false = false
  • ‘hello’ == ‘world’ = false
  • ‘3’ == 3 = true
  • 1 == true = true

Notice how now the last 2 expressions are true.  This is because the number 3 is turned into the string 3 because the types are different and then the string ‘3’ is compared to the string ‘3’ which is the same.  The last expression may be surprising that its true but its true for the same reason.  The bool true is first converted to the number 1 and then the number 1 is compared to the number 1 which is true.

Before I close this blog post I would like to address one more rule which surprises people.  When using the minus operator the rules change slightly from the plus operator above.  The rules change when you have a string and a number.  Whereas for plus that results in a concatenation, when you minus a string from a number or vice versa the string is first converted to a number and then the minus operation takes place.  Therefore ‘7’ – 5 = 2 because the ‘7’ is converted to a number.  ‘hello’ – 1 = NaN (not a number) because you can’t convert the string ‘hello’ to a number.