Typecasting and Coercion in JavaScript

Aquil Hussain
Oct 7, 2019 · 3 min read
Image for post
Image for post
No more that face.

Typecasting or coercion in simple term means to change the data type of a value to to another data type like for example, integer to a string or a string to a boolean etc.

There are two types of coercion, implicit and explicit. Implicit coercion is when there is automatic conversion of data type, where as When a developer expresses the intention to convert between types by writing the appropriate code, it’s called explicit type coercion (or type casting).

More on coercion

  • to string
  • to boolean
  • to number

String Coercion

We can explicitly convert values to a string using the String() method .
Also JavaScript does a implicit string coercion when used with the+ operator. The most trivial example would be concatenation.

val = 5
String(val) //explicit coercion
'10' + val //105 not 15 and o/p is a String, implicit coercion

All other primitive values are converted to string naturally

String(true) // 'true'
String(false) // 'false'
String(0) // '0'
String(-0.99) // '-0.99'
String(null) // "null"
String(undefined) // "undefined"

NOTE: Symbols can only be converted explicitly.

The type casting , String() method actually calls the toString() method. The only difference between type casting as a string and using toString() is that the type cast can produce a string for a null or undefined value without error as shown above.

Boolean Coercion

To explicitly convert values to boolean we use the Boolean() method. Implicit conversion is done happens in logical context i.e if else statements and by logical operators ( || && !) .
The Boolean() type cast returns true when the value is a string with at least one character, a number other than 0, or an object ; it returns false when the value is an empty string, the number 0, undefined , or null .

Boolean(0) //false
Boolean(null) //false
Boolean(undefined) //false
Boolean('') //false
Boolean('hi') //true
Boolean(-1.2) //true
Boolean(new Date()) //true
Boolean(2 || 'hello') \\true
Boolean(0 && new Date()) \\false
if(2) { ... } \\ true
Boolean(0 == '0') \\ true
Boolean(0 === '0') \\ false

Numeric Coercion

To explicitly convert a value to a number we use the Number() method. The number method converts to both integer and float. Number() method calls two different methods, parseInt() and parseFloat() implicitly depending on the value.

Number("5.6.7") //NaN
parseInt("5.5.5") //5
ParseFloat("5.5.5") //5.5

The above code snippet helps in differentiating between Number(), parseInt()and parseFloat().

Number(false) // 0
Number(true) // 1
Number(null) // 0
Number(undefined) // NaN
Number(NaN) //NaN
Number("\n") // 0

Comparison, bitwise and arithmetic operator uses implicit number conversion except for the arithmetic operator +, if there is a string, then this operator uses String()method instead for Number() .

Number("5") + " apple" // "5 apple"
Number("5") + -3.22 // 1.7799999999999998
Number("5") + "-3.22" // "5-3.22"
4 > '5' // false implicit coercion

That’s it, folks. I hope you find this interesting. Drop me your feedback! Thanks for reading.

The Startup

Medium's largest active publication, followed by +756K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store