How is “20” and 20 considered equal in JavaScript?

Question

I understand that using the "===" compares type, so running the following code results in "not equal" because it's comparing a number type to a string type.

var a = 20;
var b = "20";
    if (a === b) {
        alert("They are equal");
    } else {
        alert("They are not equal");
}

But I dont understand how using the "==" to compare only the value results in the "They are equal" message.

var a = 20;
var b = "20";
    if (a == b) {
        alert("They are equal");
    } else {
        alert("They are not equal");
}

How are the values equal? Isn't the string "20" stored as the ASCII characters 50 and 48 (0110010 and 0110000 in binary) and 20 stored as the actual binary number 0010100?

EDIT: Thanks everyone! I think all the responses are great and have helped me understand this much better.

Answer 1

The == operator compares only the values of the variables. If the types are different, a conversion is operated. So the number 20 is converted to the string "20" and the result is compared.

The === operator compares not only the values, but also the types, so no cast is operated. In this case "20" !== 20

Answer 2

When type conversion is needed, JavaScript converts String, Number, Boolean, or Object operands as follows.

• When comparing a number and a string, the string is converted to a number value. JavaScript attempts to convert the string numeric literal to a Number type value. First, a mathematical value is derived from the string numeric literal. Next, this value is rounded to nearest Number type value.
• If one of the operands is Boolean, the Boolean operand is converted to 1 if it is true and +0 if it is false.
• If an object is compared with a number or string, JavaScript attempts to return the default value for the object. Operators attempt to convert the object to a primitive value, a String or Number value, using the valueOf and toString methods of the objects. If this attempt to convert the object fails, a runtime error is generated.

The problem with the == comparison is that JavaScript version 1.2 doesn't perform type conversion, whereas versions 1.1 and 1.3 onwards do.

The === comparison has been available since version 1.3, and is the best way to check of two variables match.

If you need your code to be compatible with version 1.1, 1.2 and 1.3 versions of JavaScript code, you should ensure that the variables all match as if it was an === comparison that was being performed.

Answer 3

The JavaScript engine sees the a as a number and casts the b to number before the valuation.

Answer 4

Part of the definition of "==" is that the values will be converted to the same types before comparison, when possible. This is true of many loosely typed languages.

Answer 5

Javascript is designed such that a string containing numbers is considered "equal" to that number. The reason for that is simplicity of use for the case of users entering a number into an input field and the site validates it in JS -- you don't have to cast the entered string to a number before comparing.

It simplifies a common use case, and the === operator still allows you to compare with the type considered as well.

Answer 6

As far as I know JavaScript does automatic data type conversion on the fly - so maybe the variables are casted to equivalent types automatically.