In my last article, I wrote comprehensively about converting types in javascript manually which is the javascript Type conversion. In this article I will continue the conversion type in Javascript which happens behind the scene (Javascript engine) which is the Javascript Type Coercion

Type Coercion

Type coercion is similar to type conversion, but the only key difference is that in type coercion the conversion of types are performed automatically or implicitly by the JavaScript engine.

For example, In the built-in alert() method when we pass any values the JavaScript engine will automatically convert those values into a string and display the result.

In type coercion, the same data types are used such as String, number, and boolean, converted into their desired type.

Types of Type coercion

String coercion

When a string is concatenated using plus(+) operator with a Number or a non-string type value, Javascript engine automatically change the Number or Non-string type value into string without using any built-in Javasript function.

const stringWithNumber = "1" + 2;
console.log(stringWithNumber); // 12

const stringWithBoolean = "30" + true;
console.log(stringWithBoolean); 30true

const stringWithNull = "15" + null;
console.log(stringWithNull); //15null

const stringWithUndefined = "25" + undefined;
console.log(stringWithUndefined); // 25undefined

const stringWithNan = "40" + NaN;
console.log(stringWithNan); // 40NaN

In the above examples; string is concatenated with different types but the result in all is similar which is all are printed at the console as string even though both values are not string. This is possible because, in Javascript type coercion, if the first operand is a string and the second operand is non-string then the result always prints as a string.

Here the ‘+’ operator acts as a concatenation of two different operands.

Number coercion

The mathematical operations like Subtraction(-), Multiplication(*), Division(/), and Modulus(%) performed with the string then the output of the expression is converted into a number implicitly.

Note: In number coercion, the plus(+) operator is not used.

For example

const subtractionCoercion = "12" - 2;
console.log(subtractionCoercion); // 10

const multiplicationCoercion = "30" * 2;
console.log(multiplicationCoercion); 60

const divisionCoercion = "15" / 3;
console.log(divisionCoercion); // 5

console.log("Hello" - "World"); // NaN

console.log("Hello" * 2); // NaN

If any one of the string is non-numeric or both the strings are non-numeric then the JavaScript display the result as NaN i.e., not a number.

const booleanWithNumber = true + 2;
console.log(booleanWithNumber); // 3

const booleanWithNumber2 = false + 2;
console.log(booleanWithNumber2); // 2

const booleanWithNull = false * null;
console.log(booleanWithNull); //NaN

const booleanWithUndefined = true / undefined;
console.log(booleanWithUndefined); // NaN

const booleanWithNan = true * NaN;
console.log(booleanWithNan); // NaN

In the above examples, You can observe that JavaScript considers the true value as 1 and the false value as 0.

summary

If we are writing a number in ” “ and then try to add two or more numbers. Then it will behave as a string and it will give us a concatenated string. Then, If we are writing a number in ” “ and then try to divide, multiply, or subtract two or more numbers. Then in this case, the string will behave as a number type and the output value is also a number data type.

Conclusion

The conversion and coercion terms are quite confusing at first, but you have understood everything in this article. In the interview process, the interviewer may ask questions related to these types, and you will be able to answer them without any problem.

Thanks for Reading.

Don't forget to follow me for more educative articles