What is Type Coercion in JavaScript ?

01 Jul, 2020
Type Coercion refers to the process of automatic or implicit conversion of values from one data type to another. This includes conversion from Number to String, String to Number, Boolean to Number etc. when different types of operators are applied to the values.
In case the behavior of the implicit conversion is not sure, the constructors of a data type can be used to convert any value to that datatype, like the Number(), String() or Boolean() constructor.
1. String to Number Conversion: When any string or non-string value is added to a string, it always converts the non-string value to a string implicitly. When the string ‘Rahul’ is added to the number 10 then JavaScript does not give an error. It converts the number 10 to string ’10’ using coercion and then concatenates both the strings. Some more examples are shown below.
Example:
<!DOCTYPE html><html>  <head>    <title>        What is Type Coercion         in JavaScript?    </title></head>  <body>    <h1 style="color: green;">        GeeksforGeeks    </h1>          <h2>Type Coercion</h2>          <h3>Output</h3>          <script>                  // The Number 10 is converted to        // string '10' and then '+'        // concatenates both strings           var x = 10 + '20';        var y = '20' + 10;          // The Boolean value true is converted        // to string 'true' and then '+'        // concatenates both the strings        var z = true + '10';          document.write(x);        document.write("<br>");        document.write(y);        document.write("<br>");        document.write(z);    </script></body>  </html>
Output:
2. String to Number Conversion: When an operation like subtraction (-), multiplication (*), division (/) or modulus (%) is performed, all the values that are not number are converted into the number data type, as these operations can be performed between numbers only. Some examples of this are shown below.
Example:
<!DOCTYPE html><html>  <head>    <title>        What is Type Coercion        in JavaScript?    </title></head>  <body>    <h1 style="color: green;">        GeeksforGeeks    </h1>      <h2>Type Coercion</h2>      <h3>Output</h3>      <script>                  // The string '5' is converted        // to number 5 in all cases        // implicitly         var w = 10 - '5';        var x = 10 * '5';        var y = 10 / '5';        var z = 10 % '5';          document.write(w);        document.write("<br>")        document.write(x);        document.write("<br>")        document.write(y);        document.write("<br>")        document.write(z);             </script></body>  </html>
Output:
3. Boolean to Number: When a Boolean is added to a Number, the Boolean value is converted to a number as it is safer and easier to convert Boolean values to Number values. A Boolean value can be represented as 0 for ‘false’ or 1 for ‘true’. Some examples of this are shown below.
Example:
<!DOCTYPE html><html>  <head>    <title>        What is Type Coercion        in JavaScript?    </title></head>  <body>    <h1 style="color: green;">        GeeksforGeeks    </h1>      <h2>Type Coercion</h2>      <h3>Output</h3>      <script>        // The Boolean value true is        // converted to number 1 and        // then operation is performed        var x = true + 2;          // The Boolean value false is        // converted to number 0 and        // then operation is performed        var y = false + 2;          document.write(x);        document.write("<br>")        document.write(y);             </script></body>  </html>
Output:
4. The Equality Operator: The equality operator (==) can be used to compare values irrespective of their type. This is done by coercing a non-number data type to a number. Some examples of this are shown below:
Example:
<!DOCTYPE html><html>  <head>    <title>        What is Type Coercion        in JavaScript?    </title></head>  <body>    <h1 style="color: green;">        GeeksforGeeks    </h1>      <h2>Type Coercion</h2>      <h3>Output</h3>      <script>          // Should output 'true' as string '10'        // is coerced to number 10         var x = (10 == '10');          // Should output 'true', as boolean true        // is coerced to number 1        var y = (true == 1);          // Should output 'false' as string 'true'        // is coerced to NaN which is not equal to        // 1 of Boolean true        var z = (true == 'true');          document.write(x);        document.write("<br>");        document.write(y);        document.write("<br>");        document.write(z);    </script></body>  </html>
Output: 
CSS-Misc
HTML-Misc
JavaScript-Misc
Picked
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.