Type coercion, type conversion, typecasting, and type juggling: all different names that refer to the process of converting one data type into another. This process is present in almost every programming language and is an important concept in computer science.
This means that creating changes to the language can break legacy products and code, and we must instead learn how to navigate the quirks of type coercion.
typeof operator to return a variable type, we return the variable’s value type.
There are many possible ways for coercing a primitive type to a number. The
Number() function coerces the value type that passes to the function, then to a number. When a type can’t be coerced to a number, the returned result is
Let’s look at a few examples of explicit coercion using the
Number("42"); // 42 Number(""); // 0 Number(true); // 1 Number(false); // 0 Number(null); // 0 Number(undefined); // NaN
We can clearly see some obvious and unexpected results. Converting
null to a number returns
0 while converting
undefined to a number returns
NaN. Both operations should return
NaN since both value types are clearly not valid numbers.
Converting an empty string to a number returns
More great articles from LogRocket:
- Don't miss a moment with The Replay, a curated newsletter from LogRocket
- Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
- Use React's useEffect to optimize your application's performance
- Switch between multiple versions of Node
- Discover how to animate your React app with AnimXYZ
- Explore Tauri, a new framework for building binaries
- Compare NestJS vs. Express.js
Although the results that we get from the
In our first example, we received different results for
undefined. The ECMAScript specification
Number()function with a null value type it returns
0, and whenever we use the same function with
undefined it returns
ToNumber is a type conversion name that the ECMAScript specification uses when referring to an operation where a value converts to a number.
ToBoolean, which we will cover later.
Below is a list of arguments and the result the
ToNumber operation converts them to:
In our other example, we used the
Number() function with an empty string and received a
0. This is something that is explicit in the ECMAScript specification as well:
StringNumericLiteralthat is empty or contains only white space is converted to +0. – ECMAScript 2015 Language Specification
String() function. To implicitly coerce a value to a string, we can use the
+ operator with any operand that is a string.
The primitive types convert to strings as expected:
String("42"); // "42" String(true); // "true" String(false); // "false" String(null); // "null" String(undefined); // "undefined"
We should be careful when using type coercion when we want to create an operation and one of our operand types is a string.
10 + "10" // "1010" 20 + "200" // "20200" 0.212 + "1" // "0.2121"
Boolean() function. To implicitly coerce a value to Boolean, we can use logical operators, such as
! in a logical context.
The specification of the
Boolean() function is very clean and helpful. We can clearly see which results we receive depending on the value type that we pass:
The list of falsy values is easy to remember. Everything that is not on the list is a truthy value:
Boolean('') // false Boolean(0) // false Boolean(-0) // false Boolean(NaN) // false Boolean(null) // false Boolean(undefined) // false Boolean(false) // false
As stated before, logical operators also coerce a value type to a Boolean:
true && false // false true && true // true true || false // true true || !false // true "name" || 0 // "name" "name" ||  // "name" "" || [1, 2, 3] // [1, 2, 3]
This short overview provides the basics in understanding type coercion, however, reading the ECMAScript specifications can provide a more in-depth review of the concept to understand why unexpected type coercion results occur.
Debugging code is always a tedious task. But the more you understand your errors the easier it is to fix them.