What is Type Coercion in JavaScript?

Understanding Type Coercion

When we put double equality check operator between two different types of variables, the JavaScript runtime converts one value into an equivalent value in the other type, this process is known as type coercion also called type conversion.

This type conversion feature in JavaScript leads to the inconsistent results.

The double equal sign performs a comparison using type coercion so that JavaScript will try to convert the values it is working with in order to produce a useful result. The double equal sign performs a comparison using type coercion so that JavaScript will try to convert the values it is working with in order to produce a useful result. This is known as the JavaScript abstract equality comparison, and when a number is compared to a string, the string value is converted to a number value, and then the comparison is performed. This means when the number value 100 is compared with the string value 100, the string is converted to the number value 100, and this is the reason why the if expression evaluates to true.

When you use the + operator on a number and a string, one of the values is converted. The confusing part is that the conversion isn’t the same as for comparisons. If either of the values is a string, the other value is converted to a string, and both string values are concatenated. This means that when the number value 100 is added to the string value 100, the number is converted to a string and concatenated to produce the string result 100100.

And, when we use ( / * - ) operators, the JS compiler tries to convert values to the number type.

The output might be shocking because all the values first converted to number type then further goes into expression.

There is a solution for such results:

Avoiding Unintentional Type Coercion

JavaScript gives Strict Check Equality ( === ). By using triple checks, JavaScript doesn't converts the datatypes of variables. Type coercion can be a useful feature, and it has gained a poor reputation only because it is applied unintentionally, which is easy to do when the types being processed are changed with new values.

The double equal sign (==) performs a comparison that applies type coercion. The triple equal sign (===) applies a strict comparison that will return true only if the values have the same type and are equal. To prevent string concatenation, values can be explicitly converted to numbers before the + operator is applied using the built-in Number function, with the effect that numeric addition is performed.

Appreciating the Value of Explicitly Applied Type Coercion

Type coercion can be a useful feature when it is explicitly applied. One useful feature is the way that values are coerced into the Boolean type by the logical OR operator ||. Values that are null or undefined are converted into the false value, and this makes an effective tool for providing fallback values.

The value of the variable named secondCity is set with an expression that checks the firstCity value: if firstCity is converted to the boolean value true, then the value of secondCity will be the value of firstCity.

The undefined type is used when variables are defined but have not been assigned a value, which is the case for the variable named firstCity, and the use of the || operator ensures that the fallback value for secondCity will be used when firstCity is undefined or null.

Understanding Nullish Coalescing

The problem doesn't just occurs with null and undefined, but also with zero.

If we assign zero value to a variable, that variable is also considered as false value. Let's take another example:

In addition to null and undefined, the logical OR operator will also coerce the number value 0 (zero), the empty string value (""), and the special NaN number value to false. These values, in addition to the false value, are collectively known as the JavaScript “falsy” values and cause a lot of confusion. In Listing 3-12, the logical OR operator uses the fallback value when the taxRate variable is assigned zero and produces the following output:

The code doesn’t differentiate between an unassigned value and the zero value, which can be a problem when zero is a required value. In this example, it is impossible to set a tax rate of zero, even though this is a legitimate rate. To address this problem, JavaScript supports the nullish coalescing operator, ??, which only coerces undefined and null values and not the other falsy values.

In the first statement, the fallback value will be used because taxRate is undefined. In the second statement, the fallback value will not be used because zero is not coerced by the ?? operator, producing the following output: