August 13th, 2009

Fun With Wacky JavaScript Type Comparison

I recently had a conversation with Scoot Koon (LazyCoder) over Twitter about the wacky JavaScript type comparisons that are allowed.  I was interested to see what weird oddities would come out if I compared the whole type system against it self.  So I sat down and wrote a simple JavaScript routine to do just that, and the below reference table is the output of that routine.

null undefined true false -1 0 1 NaN Infinity “” ” “ “null” “undefined” “true” “false” “-1″ “0″ “1″ “NaN” “Infinity”
null null null
undefined undefined undefined
true true true true
false false false false false false
-1 -1 -1
0 0 0 0 0 0
1 1 1 1
NaN
Infinity Infinity Infinity
“” “” “” “”
” “ ” “ ” “ ” “
“null” “null”
“undefined” “undefined”
“true” “true”
“false” “false”
“-1″ “-1″ “-1″
“0″ “0″ “0″ “0″
“1″ “1″ “1″ “1″
“NaN” “NaN”
“Infinity” “Infinity” “Infinity”

So some of the oddities that emerged to me are:

  • The word “Infinity” is equal to the type Infinity, however “true” or “false” don’t equal true or false respectively.
  • " " == 0 == false and also "" == 0 == false, however " " != ""
  • Update Just noticed that NaN != NaN but Infinity == Infinity

If you would like to try this your self, or want to add to it, here is the code that I used.

var values = [null, undefined, true, false, -1, 0, 1, NaN, Infinity, "", " ", "null", "undefined", "true", "false", "-1", "0", "1", "NaN", "Infinity"];

document.write("<table><thead><tr><th></th>")
for (var x = 0; x < values.length; x++) {
	document.write("<th>" + (x > 8 ? "\"" : "") + values[x] + (x > 8 ? "\"" : "") + "</th>");
}
document.write("</tr></thead><tbody>");
for (var i = 0; i < values.length; i++) {
	document.write("<tr>");
	document.write("<th>" + (i > 8 ? "\"" : "") + values[i] + (i > 8 ? "\"" : "") + "</th>");

	for (var j = 0; j < values.length; j++) {
		var output = values[i] == values[j];

		document.write("<td style=\"text-align:center;" + (i == j ? "background-color:black;" : (output ? "background-color:green;color:#00AF33;" : "color:#e0e0e0;")) + "\">");
		document.write(output ? (i > 8 ? "\"" : "") + values[i] + (i > 8 ? "\"" : "") : "--");
		document.write("</td>");
	}

	document.write("</tr>");
}
document.write("</tbody></table>");

I think Scott really hit the nail on the head when he said this about JavaScript coercion.

LazyCoder (Scott Koon) on JavaScript Coercion

Tags:

Social: kick it on DotNetKicks.com | Shout it | Add to DZone

This entry was posted on Thursday, August 13th, 2009 at 9:05 am and is filed under Programming. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

7 Responses to “Fun With Wacky JavaScript Type Comparison”

  1. DotNetKicks.com Says:

    Fun With Wacky JavaScript Type Comparison…

    You’ve been kicked (a good thing) – Trackback from DotNetKicks.com…

  2. Reflective Perspective - Chris Alcock » The Morning Brew #412 Says:

    [...] Fun With Wacky JavaScript Type Comparison – Nick Berardi takes a look at some of the slightly strange comparisons that are possible in Javascript due to type coercion and conversion [...]

  3. David Says:

    That’s one of the main reasons why I always use ===, !==, etc. for comparisons. To explicitly prohibit type coercion when comparing values or objects and avoid those “WTF” moments (or at least, avoid them most of the time.)

  4. David Says:

    Humm, should you not have been using the Javascript equality test (===) instead of ==?

  5. Nick Berardi Says:

    David and David,

    The point of this wasn’t that I didn’t know about === or !==, it was the wacky way that non-specific type comparisons happen in JavaScript. This post is suppose to be a reference sheet of the non-type specific comparisons available in JavaScript. Because sometimes they can be great to compare a “0″ against a 0, or a 0 against a false. I do know about type specific comparisons in JavaScript and I use them when necessary.

  6. Ates Goral Says:

    It would be interesting to see the differences (if any) between browsers!

  7. Dmitry Says:

    Ok, I can understand null==undefined. Type coercion, undefined is casted to null, you should really use === if you want to distinguish between them. But can anybody explain for me the twisted logic behind 0==”"? Why 0 is not casted to string first?