What is Type Coercion in JavaScript ?

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
 

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.