Coercion is the phenomenon that implicitly converts a value from one primitive type to another. Many times we need to convert a particular data type to another data type. If you have programmed in C/C++ or Java, you are more likely to encounter type casting where you have to convert a variable from one type to another.

Now, C/C++ or Java, these are strongly typed language. This means you have to explicitly write what type of variable you want. For example, for an integer type variable you use the keyword “int” or for float you use the keyword “float”. But JavaScript is not like that. It’s a dynamically typed language that means you can use one keyword to declare any type of variable you want. The JavaScript Engine automatically figures out what type of data you initialized/assigned to a particular variable.

Coertion is the implicit process of converting a data type to another data type. You might be thinking why would the JavaScript Engine convert your variables to another type ? Good Question !!! But unlike most other programming languages, JavaScript gives you the freedom to mix different types of variables. I mean, in JavaScript, you can add an integer with a string. You might be thinking, that’s crazy! In C++, to do this you have to use operator overloading. Let’s take a look at some examples to practically observe the behavior. We’ll code couples of lines which will add two integers using the addition operator and we’ll log that using the console.log() function which is used to log a message to the browser’s console.

let a = 1, b = 2;
console.log(a+b); // returns 1 + 2 =  3

Now, what if we try to add one string and one integer ?

let a = '1';
let b = 2;
console.log(a+b); // returns 12

So, why does it returns 12 ? The variable ‘a’ has a primitive type of string, when the value of variable  ‘b’ is an integer. Since, we are trying to add different data types with the addition operator,  the JavaScript is converting the variable ‘b’ to a string. If you run the code below, you’ll get the same result. It returns 12.

let a = '1';
let b = '2';
console.log(a + b); // returns 12

So, when we mix different data types, it’s the JavaScript Engine who decides which variable to convert. Now, Let’s take a look at the if else statements.

if ( 1 == '1' )
    console.log('true');
else
    console.log('false');

It returns ‘true’ because of the type coercion in JavaScript. Now, what should you do not to get caught at the trap ? So, what we can do is ,instead of using the simple equality operator, we should rely on the strict equality operator which is ‘===’.

if ( 1 === '1' )
    console.log('true');
else
    console.log('false');

Now, it will return false because in this case we’re using the strict quality operator. That’s the fundamental about coercion in JavaScript. Coercion can really cause some difficult to find bugs in your programs, if you don’t understand the concept of coercion. Often times people complain that coercion is a bad part of JavaScript which shouldn’t exist on the language. Now, if you truly understand the mechanism of coercion and how it really works, you will not say that coercion is bad. And I’ve seen People coming from other languages and struggling with JavaScript because JavaScript doesn’t work the way those languages work.

Do you like Naimul Haque's articles? Follow on social!
Comments to: Coercion in JavaScript

Your email address will not be published. Required fields are marked *