Explain Implicit Type Coercion in JavaScript with example

Home » Blog » JavaScript » Explain Implicit Type Coercion in JavaScript with example

Implicit type coercion in JavaScript is automatic conversion of value from one data type to another. It takes place when the operands of an expression are of different data types.

String Coercion

String coercion takes place while using the ‘ + ‘ operator. When a number is added to a string, the number type is always converted to the string type.

Example 1:

var x = 7;
var y = "7";
x + y // Returns "77"

Example 2:

var x = 24;
var y = "Hello";
x + y   // Returns "24Hello";

**Note – ‘ + ‘ operator when used to add two numbers, outputs a number. The same ‘ + ‘ operator when used to add two strings, outputs the concatenated string:

var name = "Sharaf";
var surname = " Haque";

name + surname     // Returns "Sharaf Haque"

Let’s understand both the examples where we have added a number to a string,

When JavaScript sees that the operands of the expression x + y are of different types ( one being a number type and the other being a string type ) , it converts the number type to the string type and then performs the operation. Since after conversion, both the variables are of string type, the ‘ + ‘ operator outputs the concatenated string “33” in the first example and “24Hello” in the second example.

**Note – Type coercion also takes place when using the ‘ – ‘ operator, but the difference while using ‘ – ‘ operator is that, a string is converted to a number and then subtraction takes place.

var x = 7;
Var y = "7";
x - y    //Returns 0 since the variable y (string type) is converted to a number type

Recommended: JavaScript ES6 Cheat Sheet | Download Pdf

Boolean Coercion

Boolean coercion takes place when using logical operators, ternary operators, if statements and loop checks. To understand boolean coercion in if statements and operators, we need to understand truthy and falsy values.

Truthy values are those which will be converted (coerced) to true . Falsy values are those which will be converted to false .

All values except 0, 0n, -0, “”, null, undefined and NaN are truthy values.

If statements:

Example:

var x = 0;
var y = 23;
        
if(x) { console.log(x) }   // The code inside this block will not run since the value of x is 0(Falsy)  
        
if(y) { console.log(y) }    // The code inside this block will run since the value of y is 23 (Truthy)

Recommended: Primitive and Reference Type Data in JavaScript

Logical operators:

Logical operators in javascript, unlike operators in other programming languages, do not return true or false. They always return one of the operands.

OR ( | | ) operator – If the first value is truthy, then the first value is returned. Otherwise, always the second value gets returned.

AND ( && ) operator – If both the values are truthy, always the second value is returned. If the first value is falsy then the first value is returned or if the second value is falsy then the second value is returned

Example:

var x = 220;
var y = "Hello";
var z = undefined;
        
x | | y    // Returns 220 since the first value is truthy
        
x | | z   // Returns 220 since the first value is truthy
        
x && y    // Returns "Hello" since both the values are truthy
        
y && z   // Returns undefined since the second value is falsy
        
if( x && y ){ 
  console.log("Code runs" ); // This block runs because x && y returns "Hello" (Truthy)
}   
        
if( x || z ){
  console.log("Code runs");  // This block runs because x || y returns 220(Truthy)
}

Equality Coercion

Equality coercion takes place when using ‘ == ‘ operator. As we have stated before

The ‘ == ‘ operator compares values and not types.

While the above statement is a simple way to explain == operator, it’s not completely true

The reality is that while using the ‘==’ operator, coercion takes place.

The ‘==’ operator, converts both the operands to the same type and then compares them.

Example

var a = 12;
var b = "12";
a == b // Returns true because both 'a' and 'b' are converted to the same type and then compared. Hence the operands are equal.

Coercion does not take place when using the ‘===’ operator. Both operands are not converted to the same type in the case of ‘===’ operator.

Example:

var a = 226;
var b = "226";

a === b // Returns false because coercion does not take place and the  operands are of different types. Hence they are not equal.

Conclusion

Here is the Implicit type coercion in JavaScript we discuss above briefly. If you like it, then spread free knowledge among everyone. Help everyone to know and learn. See you in a later post. Happy coding.

Read my others article about coding and programming, Tips, Productivity , Resources etc…

Also, if you have any questions or suggestions related to the article, please let us know in the comments below.

Recommended: Test your JavaScript knowledge – JavaScript quiz!

Read Next

JavaScript ES6 Cheat Sheet with example. ES6 is the latest standard specification of JavaScript.Here's a cheatsheet to show you...
Continue Reading
Download Free PSD to HTML with source code. Are you a absolute beginners or in intermediate level? Grow up your skills with practice...
Continue Reading
CSS Shorthand properties are properties that let you set the values of multiple other CSS properties simultaneously. Using CSS...
Continue Reading
Git is the free and open source distributed version control system that's responsible for everything GitHub related. This git cheat sheet...
Continue Reading
Implicit type coercion in JavaScript is automatic conversion of value from one data type to another. It takes place ...
Continue Reading
A responsive website design responds to the device it is being viewed on, whether a desktop computer, laptop, tablet, or smartphone.
Continue Reading

Reach Out to me!

Discuss a project or just want to say hi? My Inbox is open for all.

"Client satisfaction is the key to me.Always try to provide the best possible services to my clients in every steps."

Narayanganj , Bangladesh
Open for opportunities: Yes!