About a couple of weeks ago, I actually ended up fixing a bug, because someone working with component did not care enough for "javascript automatic type conversion" checks and the whole logic screwed up since empty string "" got automatically converted to 0 by the javascript.
Well apart from that, another reason that makes me obliged to write about this is that javascript is highly flexible about the type of values it requires. Trust me this will sometime make you confused that how sometime one type converts to another!!!
Some of this behavior I have already described in first part of this series - When javascript expects a boolean value, you may supply a value of any type and javascript will convert it as needed.
This type conversion flexibility is supported for other types as well. What I mean to say is that when javascript expects a number or a string, it will automatically convert to the value of that type.
In this blog I will discuss about the automatic conversion of different types to number type by javascript.
The very first thing, before we start anything on this topic I will ask you to have a look at the below code snippets (If possible i would request you to try these out in the browsers developers tool as well)
Well apart from that, another reason that makes me obliged to write about this is that javascript is highly flexible about the type of values it requires. Trust me this will sometime make you confused that how sometime one type converts to another!!!
Some of this behavior I have already described in first part of this series - When javascript expects a boolean value, you may supply a value of any type and javascript will convert it as needed.
This type conversion flexibility is supported for other types as well. What I mean to say is that when javascript expects a number or a string, it will automatically convert to the value of that type.
In this blog I will discuss about the automatic conversion of different types to number type by javascript.
The very first thing, before we start anything on this topic I will ask you to have a look at the below code snippets (If possible i would request you to try these out in the browsers developers tool as well)
"" * 2; // 0
null * 2; // 0
false * 2 // 0
true * 2 // 2
"4" * "2" // 8
undefined * 2 //NaN
"a" * 2; // NaN
//check below isNaN check also
isNaN(""); //false
isNaN(true); //false
isNaN(false) //false
isNaN("4") //false
isNaN("a") //true
null * 2; // 0
false * 2 // 0
true * 2 // 2
"4" * "2" // 8
undefined * 2 //NaN
"a" * 2; // NaN
//check below isNaN check also
isNaN(""); //false
isNaN(true); //false
isNaN(false) //false
isNaN("4") //false
isNaN("a") //true
I feel the examples above are very self explanatory. These are primitive to primitive conversions i.e boolean to number or string to number or null to number conversions which seem to be pretty straight forward.
So the basic concept is, when required:
So the basic concept is, when required:
1.) false will convert to numeric 0.
2.) true will convert to numeric 1.
3.) empty string "" will convert to numeric 0.
4.) non- empty string having numeric values will convert to corresponding numeric value of type number.
5.) non- empty string having non-numeric values will convert to NaN.
6.) null converts to 0.
7.) undefined converts to NaN.
2.) true will convert to numeric 1.
3.) empty string "" will convert to numeric 0.
4.) non- empty string having numeric values will convert to corresponding numeric value of type number.
5.) non- empty string having non-numeric values will convert to NaN.
6.) null converts to 0.
7.) undefined converts to NaN.
A point to notice here is that though both null and undefined get converted to Boolean value false when required as boolean, undefined will not convert to numeric 0 when required as number, rather undefined will be treated as NaN while null will be treated as numeric 0.
Now I will be talking about the thing which actually will bring bewildered expressions on your faces. Try the below examples now....
Now I will be talking about the thing which actually will bring bewildered expressions on your faces. Try the below examples now....
[] * 2; // 0
[9] * 2; // 18
[9,2] * 2; // NaN
["a"] * 2; //NaN
isNaN([]); // false
isNaN([9]); // false
isNaN([9,2]); // true
[9] * 2; // 18
[9,2] * 2; // NaN
["a"] * 2; //NaN
isNaN([]); // false
isNaN([9]); // false
isNaN([9,2]); // true
I was even more surprised when I multiplied a date object to a number and got a result as well!!!! Even the isNaN function of javascript said that date object is a numeric value.
new Date(2015, 04, 23) * 3; //4297039200000
isNaN(new Date()); //false
isNaN(new Date()); //false
Remember that Arrays and Dates are objects in javascript. The point here is that when required javascript can automatically convert objects to number type as well.
But the question is will javascript convert all objects to number types when required?
To get the answer of this question, we need to know the logic that javascript puts in converting the object type to number type.
Javascript follows the following steps to convert any object type to number type:
i.) If the object has valueOf() method, this method will be called. This method returns the primitive value. Now if this primitive value is not a number then javascript will use the primitive to primitive auto type conversion to change it to number type.
ii.) Otherwise, javascript will check to see if the object has a toString() method. If yes, then this method will be called, which again returns the primitive value. Now the javascript will use primitive to primitive conversion rules to change it to number.
iii.) Otherwise, finally you will get a TypeError....
To elaborate this point I will show you one more example:
But the question is will javascript convert all objects to number types when required?
To get the answer of this question, we need to know the logic that javascript puts in converting the object type to number type.
Javascript follows the following steps to convert any object type to number type:
i.) If the object has valueOf() method, this method will be called. This method returns the primitive value. Now if this primitive value is not a number then javascript will use the primitive to primitive auto type conversion to change it to number type.
ii.) Otherwise, javascript will check to see if the object has a toString() method. If yes, then this method will be called, which again returns the primitive value. Now the javascript will use primitive to primitive conversion rules to change it to number.
iii.) Otherwise, finally you will get a TypeError....
To elaborate this point I will show you one more example:
var TestClass = function(arg)
{
this.value = arg;
}
//overide the valueOf method
TestClass.prototype.valueOf = function()
{
return this.value;
}
var obj1 = new TestClass(9);
var obj2 = new TestClass("a");
console.log(obj1 * 2) // prints 18
isNaN(obj1) // returns false
console.log(obj2 * 2) // prints NaN
isNaN(obj2) // returns true
{
this.value = arg;
}
//overide the valueOf method
TestClass.prototype.valueOf = function()
{
return this.value;
}
var obj1 = new TestClass(9);
var obj2 = new TestClass("a");
console.log(obj1 * 2) // prints 18
isNaN(obj1) // returns false
console.log(obj2 * 2) // prints NaN
isNaN(obj2) // returns true
I hope now you understand better how objects will be converted to number type by javascript when it requires a number type operand.
You may try the above example by overriding the toString method as well.
And yes check out what valueOf method for Date object returns, to understand why it got successfully converted to number type :)
You may try the above example by overriding the toString method as well.
And yes check out what valueOf method for Date object returns, to understand why it got successfully converted to number type :)