Type Coercion in JavaScript

Coercion is one of the weird parts of Javascript and has time and again confused many newbies and even developers when the came across it.Also, trick concepts like these continue to remain a hot topic in developer interviews.So without much further ado, let’s dive into it and get to know it better.

What is Coercion?

Coercion is the unexpected type casting in JavaScript.Often when working with JavaScript we come across situations involving typecasting data from one data type to another.Coercion refers to the typecasting you wouldn’t believe would happen at first go! .

Some people consider this as a flaw in JavaScript but I suggest we take a deeper look into it and embrace it!

Strings and numbers

So,what happens when we combine strings and numbers?.How do we convert a number to a string.The most common approach is to concatenate it with + operator.

// "5"
5 + ""

Whenever we are using “+” or “-” operator the values must be of the same type.But in the case above one was a number and other a string so what JavaScript does it it tries to even them out.In this case it casts the number to string and adds them together.So the key takeaway here is every “+” expression involving a string would result in a string

"34" + "0" // "340"
"20" + "48" // "2048"

But what happens when we use “-” ? Though it can be used only on numbers.

JavaScript treats them as numbers, computing the difference and returning a number

"45" - 4 // 41
"23" - 0 //23
"33" - "22" // 11

So that’s with the numbers but what about arrays? Let’s see what happens what happens when we add two arrays

[1,2] + [3,4] // "1,23,4"
["aa", "bb"] + ["cc" + "dd"] // "aa,bbccdd"

With arrays whenever we use the + operator the values will concatenate if one of them is a string or they will be cast to strings if possible.

In the case of “-” operator:

[3] - [1] // 2
["aa", "bb"] - ["cc" + "dd"] //Nan

Booleans

Boolean coercion is used in if statements,loops and involves logical operators.Whenever we use one of these if the variable itself is not a boolean then it will be coerced to one.Also, the result of a boolean expression may not necessarily be a boolean value but the value of one of the operands used.

let a = 40;
let b = "mystring"
let c = null

Using logical operators on these:

a || b //40
a && b // "mystring"
b || c //"mystring"
b && c // null
a || c // 40
a && c // null

So what exactly is happening here?

• In the case of || operator, if the first value casts to true you will get that value returned,otherwise the second one.
• In the case of && you will always get the second value if they are both coerced to true. If the first one casts to false then you will get it’s value returned.

You may ask how is this useful?

Consider this

function welcomeDog(name){
    dogName = name || 'Dog!';
    console.log('Hello ' + dogName);
greet() // Hello Dog!

Here we check if a name is passed to the function.If passed we use that value else use the other one.

Equality

Some operations cannot be run on values of different values but JavaScript uses coercion to makes our lives easier.

When comparing two values using == operator JavaScript uses coercion to cast the values into same data types,but with the === operator it doesn’t type cast the values.

42 == "42" // true
42 === "42" // false

All in all, == allows coercion, but === doesn’t.

That’s it

Happy Coding!