Visual Studio Code warning when comparing types in JavaScript using '==='

Question

This is a two part question. And is different than other questions that are based on equality in JavaScript because it deals with a specific warning that is displayed in the IDE "Visual Studio Code" and why that warning message is or is not in error.

I'm getting the following warning message in Visual Studio code:

Operator '===' cannot be applied to types 'number' and => 'string'

on the following line of code:

var x = 23;
var y = "23";

x.valueOf() === y.valueOf() ? 
    console.log("Types ARE the same") 
        : console.log("Types ARE NOT the same");

Now this technique definitely works for me and I understand the reason for using a triple equal for this type of thing rather than a double equal. This same code I have learned in several fundamentals courses at codeschool and pluralsight as a way to generate a boolean value based on the type of two different values where the product or returned value is that of either true or false and the technique can come in handy.

MY QUESTIONS:

How is the code above any different from:

 x === y ? 
    console.log("Types ARE the same") 
        : console.log("Types ARE NOT the same");

in this simple example of comparing two simple values and their types, is there something additional I can do by using the valueOf() method along with it?

Also is Visual Studio Code wrongly generating this warning and if not is there a better way to do this type of check?

Because no matter what method I use above I get the same warning error in Visual Studio Code, but it works fine for me in practice.

Answer 1

Going by what I see from the MDN docs here for String.prototype.valueOf(); and here for Number.prototype.valueOf(); and the code that you have, I must say you already have x and y holding primitive values of string and number. There is no need to do a valueOf() on x and y as they are not of Object type.

You would ideally use String.prototype.valueOf(); on a String Object to get it's primitive value and Number.prototype.valueOf(); to get primitive value of the Number Object which result in string data type and number data type values respectively.

Hence, the warning I suppose. Although I dont have prior experience with visual-studio, but I feel it understands that .valueOf() should be used on an Object type rather than that on a primitive type.

Answer 2

So because the example above is comparing two known defined values that are obviously of different types, Visual Studio Code is actually correct in issuing a warning, because it knows that for a fact variable x is a string and variable y is an integer and therefore warns (very vaguely and not that intuitively for me anyways) that by comparing these two known hard coded values we will always get a false, and if we in fact drop one of the equal signs and make it a double equal operator, then it will always equate to true because it will enforce "Type Coercion" which will change the string value to an integer. Therefore if we setup this same type of ternary statement inside of a function where the parameters are possibly unknown and THE WARNING MESSAGE DOES GO AWAY:

function compareTwo(a,b) { 
    a.valueOf() == b.valueOf() 
        ? console.log("value types ARE the same") 
            : console.log("value types ARE NOT the same");
}

Because it's now possible that anyone can pass anything into this function and it no longer will always be true or false in either scenario.

Answer 3

The valueOf doesn't matter and has nothing to do with the warning. But VS correctly identifies that you're using type sensitive comparison === comparing two different types. Your expression 23 === "23" will ALWAYS return false, so it could just as well just say

false ? doIfTrue() : doIfFalse();

or even better yet, just remove the entire first part of the statement since it will never fire

doIfFalse();

VS recognizes this, hence the warning. Your conditional statement is completely superfluous and could safely be removed.

You would receive a similar warning if you were to write something like

if (true) doSomething();

or

if (true == false) doSomething();

VS will recognize that the conditional holds no meaning and makes code either fire every time or completely unreachable, and it warns you about it (as it should).

And like you noted: If the variables aren't hard-coded in the scope, the warning will go away, since VS stops validating type of variables set outside the function. Javascript isn't a typed language and keeping track of the content of all variables would just be too taxing and complex for the IDE.

Depending on your coding style, for all VS knows it might even be your desired behaviour (if variable types match, do something, otherwise, do something else). When the variables are set in the same scope though, it just creates unreachable code.