What is the importance of '+' operator in type conversion in JavaScript?

Javascript Web Development Front End Technology

Java script is an autonomous type of language most of the time operation directly convert the value of their write type. But there are also cases in which we need to do explicit type conversion.

While Java script provides many ways to convert data from one form to another. But there are two most common types of conversion.

converting the value to a string.
converting a value to a number.

Implicit conversion

There are various operators and functions in the JavaScript that automatically convert values to the right type like the alert() function in JavaScript accepts any value and converts it into in string. But various operator creates a problem like the '+' operator.

Input "5" + "5" output : "55"
Here "+" operator stands for string concatenation in that case.

Input "5" - "2" output : "3"
Here output is 2 because Implict Conversion.

Example: 1

Following example demonstrates the implicit type conversion in JavaScript.

<!DOCTYPE html>
<html>
<head>
   <title>type conversion</title>
</head>
<body>
   <script>
      document.write('("5" - "3") = ' + ("5" - "3") + "<br>");
      document.write('("5" - 3) = ' + ("5" - 3) + "<br>");
      document.write('("5" * "2") = ' + "5" * "2" + "<br>");
      document.write('("5" % "2") = ' + ("5" % "2") + "<br>");
      document.write('("5" + null) = ' + ("5" + null) + "<br>");
   </script>
</body>
</html>

Note − In the following above example, the "+" operator only concatenates the value because "+" operators stand for string.

Example 2: Converting value to a string

The String() and toString() are two functions in JavaScript which converts the value to a string.

In the following example, we are going to convert numbers to a string, a Boolean to a string, and date to a string.

<!DOCTYPE html>
<html>
<head>
   <title>type conversion</title>
</head>
<body>
   <script>
      // Number and date has been assigned
      // to variable A and B respectively
      var A = 155;
      var B = new Date("1995-12-17T03:24:00");
      
      // number to string
      document.write(" String(A) = " + String(A) + "<br>");
      
      // number to string
      document.write(" String(A + 11) = " + String(A + 11) + "<br>");
      document.write(" String( 10 + 10) = " + String(10 + 10) + "<br>");
      
      // boolean value to string
      document.write(" String(false) = " + String(false) + "<br>");
      
      // Date to string
      document.write(" String(B) = " + String(B) + "<br>");
   </script>
</body>
</html>

Example 3

In the following code, we explain how the "+" operator works in the different types of data.

If we are using "+" b/w two numbers, then it will directly add the number and gives the output as the total number value.

If we are using "+" b/w one string and one number, then it will concatenate the number and gives the output as a string value.

If we are using "+" b/w two strings, then it will concatenate the string in one string value.

<!DOCTYPE html>
<html>
<head>
   <title>type conversion</title>
</head>
<body>
   <script>
      document.write(5 + 5 + "<br/>");
      document.write( "One is a string and one is a number:" + "5" + 5 + "<br/>" );
      document.write( "One is a number and one is the string:" + 5 + "5" + "<br/>" );
      document.write(" Both are strings: " + "5" + "5" + "<br/>");
   </script>
</body>
</html>