Type-Conversion in JavaScript Description Type conversion or typecasting is one of the very important concept in JavaScript. It refers to changing an entity or variable from one datatype to another. There are two types of conversion: 1. Implicit Conversion - Coercion 2. Explicit Conversion - casting The term for implicit type conversion is coercion. Explicit type conversion in some specific way is known as casting. Implicit type conversion Implicit type conversion, also termed as coercion, is an automatic type conversion from one data type to another data type by the compiler itself. In mixed type expression, a subtype s will be converted to a supertype t or some subtypes s1, s2,... will be converted to a supertype t at runtime so that the program will run correctly. For example:
var x = 123; 100 + x ; The above statement recognized by the compiler for x as 123 which is a number and we will get the value as 100+123 = 223 (Addition operation is happening in this area) Sample code <! DOCTYPE html> <html> <body> <p>wikitechy - JavaScript Data Type Conversion </p> <p id="wikitechy_text"></p> <script> var x = 100; document.getelementbyid("wikitechy_text").innerhtml = x+100; </script> </body> </html> Let s try with an another example, now the value of x is a var x = 'a'; x+100; The above line will recognize x as a character or string and the output is a100 (String Concatenation happening in this)
Sample code <! DOCTYPE html> <html> <body> <p>wikitechy - Javascript Data Type Conversion </p> <p id="wikitechy_text"></p> <script> var x = abc; document.getelementbyid("wikitechy_text").innerhtml =x+100; </script> </body> </html> Explicit type conversion In this case, an explicit type conversion will happen. The variables will be explicitly converted from one type to another type. For Example: parseint("3.14") - > This function will parse the value given in the brackets and convert in to integer. So, the output of the above command is 3. String(Date()) -> Get current date and time and convert it into String.
Sample code <!DOCTYPE html> <html> <body> <p>wikitechy - Javascript Data Type Conversion </p> <p id="wikitechy_text"></p> <script> var x = 123; document.getelementbyid("wikitechy_text").innerhtml = String(x) + "<br>" + String(123) + "<br>" + String(100 + 23)+ "<br>" + "<br>"+ "<br>"+ "<br>"+ x.tostring()+ "<br>" + (123).toString()+ "<br>" + (100 + 23).toString()+ "<br>" + "<br>"+ String(Date())+ "<br>" + Date().toString()+ "<br>" + "<br>"+ "<br>"+ </script> </body> </html> Number("3.14") + "<br>" + parsefloat("3.14")+ "<br>" + parseint("3.14");
Code Explanation: JAVASCRIPT BASICS Paragraph tag displaying the text WikiTechy - Javascript Arraus Paragraph tag in which we are trying to get the result. The id of the paragraph tag is, WikiTechy_Text <p id="wikitechy_text"></p> Script tag -> Entire JavaScript functions and variables needs to be declared between the tags. <script>.</script> Initialize the variable x var; x = 123;
Trying to fetch the element in the HTML WikiTechy_Text and accessing the innerhtml value and assign the properties of the object. Type casting of the variable x into String. Variable assigning method String(x) + "<br>" + The output will be 123 String(123) + "<br>" + The output will be 123 String(100 + 23)+ "<br>" + "<br>"+ "<br>"+ The output will be 123 Type casting of the variable x into String using tostring() method. x.tostring()+ "<br>" + The output will be 123 (123).toString()+ "<br>" + The output will be 123 (100 +23).toString() + "<br>" + "<br>"+ "<br>"+ The output will be 123 Type casting of the variable x into String using tostring() method. String(Date())+ "<br>" + -> The output is Thu Apr 21 2016 06:57:02 GMT+0530 (India Standard Time) Date().toString()+ "<br>" + "<br>"+ "<br>" -> The output is Thu Apr 21 2016 06:57:02 GMT+0530 (India Standard Time) Type Conversion for numbers. Trying to get the integers and float values in the below code Number("3.14") + "<br>" + -> The output is a number 3.14 parsefloat("3.14")+ "<br>" + -> The output is a number 3.14 parseint("3.14"); -> The output is a number 3
Sample Output: JAVASCRIPT BASICS
Output:
Displaying the text WikiTechy - JavaScript Arrays in the paragraph tag of the HTML page. Displaying the result String(x) + "<br>" + The output will be 123 String(123) + "<br>" + The output will be 123 String(100 + 23)+ "<br>" + "<br>"+ "<br>"+ The output will be 123 Displaying the next result x.tostring()+ "<br>" + The output will be 123 (123).toString()+ "<br>" + The output will be 123 (100+23).toString() + "<br>" + "<br>"+ "<br>"+ The output will be 123 Displaying the date values String(Date())+ "<br>" + -> The output is Thu Apr 21 2016 06:57:02 GMT+0530 (India Standard Time) Date().toString()+ "<br>" + "<br>"+ "<br>" -> The output is Thu Apr 21 2016 06:57:02 GMT+0530 (India Standard Time) Displaying the number values Number("3.14") + "<br>" + -> The output is a number 3.14 parsefloat("3.14")+ "<br>" + -> The output is a number 3.14 parseint("3.14"); -> The output is a number 3