JavaScript can be confusing sometimes and one of the biggest sources of confusion is type conversion and coercion in JavaScript.

Here is an example:

'5' + '3'
-> '53'

'5' - '3'
-> 2

Why the hell is '5' + '3' = '53' but '5' - '3' = 2? Coercion is the answer and we are going to uncover what means and why it happens.

What is type conversion and coercion in JavaScript?

Let's start first by explaining what type conversion and type coercion menus in JavaScript.

Type conversion - sometimes also called type casting - is the process of converting a value from one type to another.

It is explicit and a process we trigger manually.

For example, converting a String with the value'32' to a the value Number 32.

This is an essential task for a developer and you will use this all the time.

Type coercion however occurs when a value is automatically converted to another type.

It happens implicitly and is triggered automatically by JavaScript.

An example would be:

console.log('2' + 3);
-> 23

Here the String with the value '2' is automatically converted to the type Number.

Explicit type conversion in JavaScript

Let's start with exploring explicit type conversion in JavaScript and how you can trigger it manually.

Type conversion to String

If you want to convert a value explicitly to string you can either use the String() constructor function.

String(34) // Number
'34'
String(true) // Boolean
'true'
String(false) // Boolean
'false'
String(2.32) // Number / Float
'2.32'
String(null) // null
'null'
String(undefined) // undefined
'undefined'
String(NaN) // NaN / Number
'NaN'

Or you can use the toString() method, which is available on every object (descended from Object).

The toString() method is also called every time an Object is converted to String and you can overwrite it if you want to.

Number(12).toString(); // Number
'12'
BigInt(55).toString() // BigInt
'55'
Boolean(false).toString() // Boolean
'false'
Symbol('xy').toString() // Symbol
'Symbol(xy)'
Object().toString() // Object
'[object Object]'
({}).toString() // Object literal {}
'[object Object]'

Type conversion to Number

To convert a value into a number, you can use the Number() constructor function.

Number('test') // String
NaN
Number('234') // String
234
Number('') // String
0
Number(false) // Boolean (false)
0
Number(true) // Boolean (true)
1
Number(null) // null
0
Number(undefined) // undefined
NaN

You can also use the parseInt() function to convert Strings to Numbers. The first argument is the string and the second one the radix (10 by default).

parseInt(11100) // Radix 10 by default
11100
parseInt('11100', 2) // Radix 2 -> binary
28

And there is the parseFloat() method, which converts Strings into a floating point Number.

parseFloat('3.14')
3.14
parseFloat('test')
NaN

Type conversion to Boolean

As you might have guessed, we can use the Boolean() constructor function to convert a value into Boolean.

The way conversion to Boolean in JavaScript works is actually pretty straightforward.

Falsy values will be converted to false and truthy values to true.

Falsy values are null, undefined, NaN, 0, ''. They convert to false.

The rest are truthy values and they convert to true.

Boolean(null) // falsy
false
Boolean(undefined) // falsy
false
Boolean(0) // falsy
false
Boolean('') // falsy
false 
Boolean(NaN) // falsy
false
Boolean(123) // truthy
true
Boolean('test') // truthy
true
Boolean(' ') // truthy
true
Boolean(2.34) // truthy
true
Boolean({}) // truthy
true
Boolean([]) // truthy
true

Implicit (automatic) type conversion in JavaScript

Now let's talk about implicit or automatic type conversion in JavaScript - or better known as coercion.

Implicit type conversion to String

Whenever the + operator is used in JavaScript when any operand is a String, the implicit type coercion in JavaScript is triggered and the other operands are converted to String.

'hi' + 3
'hi3'
'hi' + true
'hitrue'
'hi' + undefined
'hiundefined'
'hi' + null
'hinull'
'hi' + {}
'hi[object Object]'

Implicit type conversion to Number

Implicit conversion to the Number type happens when an arithmetic operator like -, +, *, /, % is used.

It also happens when comparison operators are used like <, >, >=, <= are used and the unary + operator is used.

3 + true
4
3 - '1'
2
12 / `3`
4
3 * false
0
12 % true
0
+'12'
12

If one of the operands is NaN or the result of the implicit coercion is NaN, the result will be NaN.

12 / 'test'
NaN
3 * {}
NaN

Implicit type conversion to Boolean

Implicit conversion of a value to Boolean happens when logical operators &&, || or ! are used, or in logical context.

The logical operators convert the values to Boolean for the comparison but still return the actual values (as non Boolean values).

0 || 1 // 0 is falsy & 1 truthy, so 1 gets returned
1 
1 || 2 // 1 is truthy so 1 gets returned
1
if (5) { // implicit Boolean conversion