Implicit data type conversion in JavaScript when comparing integer with string using ==

Question

The code:

var num = 20;

if(num == "20")
{
    alert("It works");
}
else
{
    alert("Not working");
}

The question:

1. In C programming we have a rule name data type promotion, where when there's a mix of data type (example: addition of integer and floating point), the integer will first converted to floating point before the addition is being carry out.

2. The code above will prompt me an alert box with the message "It works" that shows the if test condition is evaluate to true.

3. For loosely typed JavaScript, I'm just curious: is there any rule like C that determines which conversion will be carry out in which situation? Besides that, the JavaScript code above converts num variable value from an integer value to string value before making comparison or vice versa?

Answer 1

Yes, all the rules of type conversion applied by the equals operator are described on the ECMA-262 specification, in The Abstract Equality Comparison Algorithm.

The algorithm might look quite complex but it can be summarized to the following cases:

1. The type the two operands is the same:

   • For primitives (String, Number, Boolean, Null, Undefined)
     • Return true if the value is exactly the same
   • For the Object type
     • Return true if the two references point to the same object

2. If the types of the two operands differ

   • If the type of one operand is either Null or Undefined
     • Return true only if the other operand value is either null or undefined
   • If one of the operands is of type Boolean or Number
     • (after some steps) Convert the other operand to Number and compare

3. If one of the operands is an Object and the other is a primitive

   • Perform Object-to-Primitive conversion on the Object and compare again

The Object-to-Primitive conversion is made through an abstract operation called ToPrimitive, this method will try to convert the object to a primitive value, using the internal [[PrimitiveValue]] method.

This will try to ejecute the object's valueOf and toString methods, and it will take the value of the first that returns a primitive value.

In the case those two methods don't return a primitive, or they aren't callable, a TypeError is thrown, e.g.:

1 == { toString:null } // TypeError!

The above statement will produce a TypeError because the default Object.prototype.valueOf method doesn't do anything more than actually the same object instance (this, not a primitive value) and we are setting an own toString property that's not a function.

A friend made small tool that might be interesting to you, it shows all the steps and recursive comparisons made between types:

• JS Coercion Tool