Introduction to JavaScript type conversion

Firstly, to get started with type conversions, we need to know that any calculation can be done among the same data types only. So what if we force JavaScript to do any such operations, like adding a number to a string?, well in such cases, the javascript compiler, by default, converts the number to the string format and then concatenates them both, this is what type conversions are.

Type Conversion in JavaScript

Type conversion in JavaScript is the conversion of one data type to another data type (such as string to a number, object to a boolean, and so on) which is required by the function or operator to work in the right way to give the expected results.

Type conversions take place when any operation is done with different data types, these conversions can be either done by the javascript compiler or manually by us.

Let’s now Understand these Conversions with a Few Examples:

In the above example, we are operating between different data types, so as discussed earlier javascript compiler by default, converts a string to a number when we use -, *, / operators while, number to a string by + operator.

The loose equality == operator also does conversion if needed, as in $3rd$ example where null is converted into 0 first and then the comparison expression is 0 == 1, which is false.

Also, in case when there is no valid operation, as in the last example, the javascript compiler automatically converts the expression result into a number which is Not a Number and the developer console shows NaN.

Types of type conversion in Javascript

Basically, there are two ways in which type conversion in Javascript takes place : Implicit and Explicit type conversions.

• Implicit type conversions - Automatic type conversion done by javascript compiler.
• Explicit type conversions - Manual type conversion done by us.

Any data type, whether it’s primitive or an objects, is valid subject to type conversions, and the logic behind objects and primitives work differently, but both primitives and objects can only be converted into these three types :

• to string
• to number
• to boolean

Let’s now first talk about Implicit and Explicit type conversion in Javascript.

1. Implicit type conversion

Implicit conversions are the conversions of one data type into another data type (ensuring that operations are done among same data types) for the operators or functions to work correctly. These conversions are also known as type coercion in Javascript.

These conversions usually happens when you apply operators to values of different types, like '2' * 5, 1 == null, null == new Date() or can be triggered due to external context like if(value) { ... }, where value is coerced to a boolean.

In the instance above, let’s now talk about where these conversions occur in Javascript with the help of a few examples:

One operator that does not trigger implicit type coercion is ===, which is a strict equality operator, whereas the loose equality operator == does both comparison and conversion if needed.

Implicit type conversions are like a double-edged sword, as it may sometimes lead to errors or defects in our code, but also a useful mechanism that allows us to write a lot less code. We will see in the next section how implicit conversions lead to issues.

2. Explicit type conversions

Explicit conversions are the conversions that are manually performed by the developer in the source code in order to get the required changes and to undo the errors done by the implicit type conversions. Such conversions are also referred as typecasting in JavaScript.

Now, you might think that where Implicit type conversions fail to give required changes, well to understand this let’s take an example: you might remember that when we use the prompt() function, it always returns a string to the developer console, this may lead errors in our function as :

In this example, we have seen how implicit type conversions can leads to a huge error/bug in a codebase, and to avoid such bugs we need to change the data type of value of pensInBag from string to a number manually, for which we can use Number() function. Similarly, for other manual conversions we can use Boolean(), String(), Number(), parseInt(), etc functions.

Explicit conversions can rescue us from such errors caused by implicit conversions, let’s see how:

Here, we will use the Number() function to change the data type of value of pensInBag from a string to a number so as to get the correct output.

Here are some other examples of explicit type conversions in primitive values:

In the above example, we know the === operator does not trigger any type conversions, so we need to put the String() function to get correct results. Similarly, in the last example, we prevent the conversion of the true into a number by using the Boolean() function.

The Most Common Data Conversions

Type conversions are a significant part of JavaScript, there is a lot of flexibility in the language and the ability to convert one data type into another data type. The different types of type conversion in JavaScript are :

• String conversions
• Numeric conversions
• Boolean conversions
• Symbol conversions

Let’s now first begin with type conversions for Primitives

String Conversion

The conversion of a data type into a string is something known as String Conversion. To explicitly convert a data type into a string, we just need to apply the String() function, and implicit string conversion can be triggered by the use of + binary operator when one operand is a string.

All primitive values are converted to strings naturally, as you might expect:

Explanation

From the above example, we have conquered that the + operator tends to convert the value of different data types into a string when there is an addition between a string and an operand of a different data type.

Numeric Conversion

Now, it’s time for Numeric conversions, likewise string conversion, we use the Number() method to convert strings, booleans, and other numeric expressions into a number Explicitly.

Implicit numeric conversion is tricky because it is triggered in many cases :

• Comparision operators (>, <, =>, <=)
• arithmetic operators ( `+`  / % ).
• Bitwise operators ( | & ^ ~)
• unary + operator
• loose equality operator == (incl. !=).

Note: that binary + operator does not trigger numeric conversion when any operand is a string. Also, == does not trigger numeric conversions when both operands are strings.

Let’s now look at some of the examples of numeric conversions:

While converting a string to a number, JavaScript compiler first removes the empty whitespaces like \n, \t characters and returns NaN, if the result after trimming white spaces is not a valid number.

Also, we need to handle null and undefined differently as, null becomes 0 whereas undefined becomes NaN when converted into a number.

Boolean Conversion

Conversion of an expression into a boolean is known as boolean conversion. This conversion can be either done explicitly by the Boolean() Function, or implicitly in logical contexts (like in if/else ) or triggered by the use of the logical operators (||, &&, !).

For instance:

Logical operators such as || and && do boolean conversions internally but return the value of original operands even if they are not boolean. As in the above example :

Note: Sometimes, we counter an error or confusion, when we use 5 == true, it results False, while when we use if(5) {}, then 5 is evaluated as true and enters if/else statement.

What happens here is that, when you compare 'something' with a number, then JavaScript will convert that 'something' into a number.

So when you compare 5 == true, JavaScript tends to convert true into 1 and, we clearly know that 1 is not equal to 5; hence the comparison is false.

While in the case of if(5) {}, 5 is converted into a boolean, and as we know, 5 is a truthy value, so it enters the if block.

Recommended: You can always opt for Explicit conversions in such situations to avoid errors, since 5 is a truthy value, you could do Boolean(5) == true, and now it returns true.

Symbol Conversion

Symbol conversion is a bit tricky and can only be converted explicitly, but not implicitly. Specifically, symbols cannot be coerced into strings or numbers so that they cannot be used accidentally used as properties that would be otherwise expected to behave as a symbol.

When we use console.log() to show the outputs of the symbols, and it works because console.log() calls String() on the symbols to create useful results.

For instance:

If you tries to add a symbol directly with a string, it will throws a TypeError as :

Concatenating mySymbol to a string requires mySymbol to be first converted into a string, and an error is thrown when coercion is detected, preventing its use in this manner.

Similarly, you cannot coerce a symbol to a number, all mathematical operators throws an error when used with a symbol.

The above example attempts to divide a symbol by 2, but throws an error regardless of the operator used.

Note: You can use a logical operator with symbols because all symbols are considered as true, just like any other non-empty value in JavaScript.

Type conversion in Objects

So far, we have learned about type conversion for primitives. Now when it comes to objects and the compiler encounters expressions like [2] + [5, 3], first it needs to convert an object to a primitive, which is then converted into a boolean, string, or a number.

The easiest case for any non-primitive value is the boolean conversion, its always coerced to true, no matter if the object or array is empty or not.

Both numeric and string conversion make use of two methods of the input object: valueOf and toString. Both methods are declared on Object.prototype and thus available for any derived types, such as Date, Array, etc.

JavaScript type conversion Table

In the table below are some of the most common JavaScript values conversion to Number, String, and Boolean :point_down:

JavaScript typeof operator

Let's introduce you to another Operator in JavaScript called as typeof operator. In JavaScript, for us to make conversions explicitly, first, we need to know the type of data that is to be converted.

This typeof operator helps us to determine the data type of JavaScript variables and values used.