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