Javascript is a very flexible language, I made a compilation of some edge cases that you may have encountered while programming. The main goal is to point out some interesting specific behaviors.
Concatenation
1] var result = [10] + 1; |
The Array doesn’t have a toNumber method, instead it has a toString method: [10] + 1 becomes “10” + 1.
String has a greater priority over Number with the + operator: “10” + 1 becomes “10” + “1” = “101”
2] var result = ['a', 'b', 'c'] + ""; |
The Array.toString method concatenates all it’s elements (converted to string) with the “,” separator.
3] var result = 'a' + 5; |
In Javascript, String has a greater priority than Number for the + operator, so 5 is converted to string before being concatenated.
In PHP, the
+ operator is only the addition so 'a' is converted to number (gives 0) before being added.In C, a
char and an integer are of the same type. 'a' is first converted to it’s Ascii value (gives 65) before being added.
Operations
4] var result = 3.75 | 0; |
|0 is a fast way to do a Math.floor for positive integers.
5] var result = 65 / 'a'; |
/ is only defined for Numbers so 'a' is first converted to a number (gives 0).A division by 0 does not throw an error but results the object
NaN (Not a Number).
Objects
6] var ob = {"10": 1}; ob[10] = 2; ob[[1, 0]] = 3; var result = ob["10"] + ob[10] + ob[[1, 0]]; |
Objects keys are strings. If you don’t provide a string, it will convert the key to string.
"10" and 10 gives "10"[1, 0] gives "1,0"
7] var $ = {"": String}; var result = !!$[([])](); |
$ is a valid variable name.Parenthesis inside the key part are useless:
array[(1+2)] is the same thing as array[1+2].Objects key are first converted to string.
[].toString() is "".It is possible to have the empty string
"" as an object key.$[""] is the String object. String(val) returns val.toString(). String() returns "".! is the negation operator. "" == false, so !"" == true, !!"" == false!!expr is a fast way to typecast an expression to a boolean.
Equality
8] var result = (' trn ' == 0); |
Unlike PHP, strings wrapped around simple quote
' are also parsed. 't' == "t"When compared to a number value, a string will be converted to a number. If it contains only spacing characters it will be converted to
0. If a string cannot be parsed as a number it will return NaN (Note that NaN != NaN).
9] var a = new String("123"); var b = "123"; var result = (a === b); |
When creating an object with the
new operator, the result type is always "object". The type of "123" is "string" so the type does not match for ===.
10] var a = {key: 1}; var b = {key: 1}; var result = (a == b); |
Object comparison is only done with the pointers behind the objects.
#jsguru h3 { margin-top: 20px; margin-bottom: -15px; }
#jsguru .wp_syntax { margin-top: 20px; }
#jsguru .result { margin-top: -16px; margin-left: 10px; }
#jsguru .hint { display: none; }
#jsguru label { font-family: monospace; }
#jsguru input { padding: 0 10px; }
var jsGuru = (function () {
var goodAnswers = [1, 2, 2, 2, 2, 1, 0, 0, 1, 1];
return {
test: function () {
var count = 0;
$.each(goodAnswers, function (id, val) {
if ($(‘[name=result’+(id+1)+’]’).eq(val).attr(‘checked’)) {
count++;
}
});
$(‘#jsguru-result’).html(‘You scored ‘ + count + ‘ / 10’);
},
highlight: function () {
$(‘#jsguru .hint’).show();
$.each(goodAnswers, function (id, val) {
$(‘[name=result’+(id+1)+’]’).eq(val).parent().css(‘font-weight’, ‘bold’).css(‘color’, ‘orange’);
});
document.location.hash = ‘jsguru’;
}
}
}());
